Update Mithral brand design tokens

README.md

@@ -5,10 +5,18 @@ A consistent, arcane-inspired design system used across The Mithral Archive appl
 ## Core Palette
 
 - **Obsidian**: `#08090C` (Primary Background)
-- **Mithral**: `#E2E8F0` (Primary Text / Silver)
+- **Mithral**: `#FFFFFF` (Primary Text / Silver)
-- **Mithral Dim**: `#94A3B8` (Secondary Text)
+- **Mithral Dim**: `rgba(255, 255, 255, 0.74)` (Secondary Text)
-- **Mithral Dark**: `#334155` (Borders / Muted)
+- **Mithral Soft**: `rgba(255, 255, 255, 0.48)` (Quiet Labels)
-- **Arcane Blue**: `#38BDF8` (Accent / Glow)
+- **Mithral Dark**: `rgba(255, 255, 255, 0.22)` (Muted Lines)
+- **Arcane Blue**: `#A78BFA` (Purple Accent / Glow)
+
+## Surface Language
+
+- **Surface Card**: dark glass card surface used for panels and controls.
+- **Surface Card Hover**: slightly brighter glass surface for interactive hover states.
+- **Surface Glass**: translucent obsidian field for inputs and subtle overlays.
+- **Border Arcane**: low-opacity purple border for active/selected states.
 
 ## Typography
 
@@ -41,5 +49,12 @@ Include `base.css` and `components.css` for standard animations, scrollbars, and
 - **.arcane-circle**: Rotating background rings.
 - **.ledger-row**: Interactive links with the "Mithral Vein" hover effect.
 - **.stat-card**: Glowing cards for display metrics.
+- **.glass-panel**: Portal-style glass card panel.
+- **.arcane-button**: Purple-accent uppercase action button.
+- **.eyebrow-rune**: Small uppercase decorative label.
 - **.portal-divider**: Ornamental dividers with gradient lines.
 - **.bg-noise**: Film grain overlay effect.
+
+## Notes
+
+The general design-system files have been aligned with the newer Portal-v2 brand language. Jellyfin/ElegantFin theme files are separate and should be updated independently.

base.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Inter:wght@300;400;500&family=JetBrains+Mono&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Inter:wght@300;400;500;700;800&family=JetBrains+Mono:wght@400;700&display=swap");
 
 * {
   margin: 0;
@@ -12,10 +12,36 @@ body {
   font-family: var(--font-body);
   min-height: 100vh;
   line-height: 1.6;
+  position: relative;
+  overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+  background:
+    radial-gradient(circle at 20% 15%, rgba(167, 139, 250, 0.10), transparent 35%),
+    radial-gradient(circle at 80% 20%, rgba(167, 139, 250, 0.08), transparent 38%),
+    radial-gradient(circle at 50% 55%, rgba(167, 139, 250, 0.06), transparent 42%),
+    linear-gradient(180deg, rgba(8, 9, 12, 0.98) 0%, rgba(8, 9, 12, 0.98) 100%);
+}
+
+a {
+  color: inherit;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
 /* Scrollbar */
 ::-webkit-scrollbar {
   width: 6px;
@@ -35,6 +61,10 @@ body {
 @keyframes spin { 100% { transform: rotate(360deg); } }
 @keyframes spin-reverse { 100% { transform: rotate(-360deg); } }
 @keyframes reveal { to { opacity: 1; transform: translateY(0); } }
+@keyframes pulse-glow {
+  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 5px var(--pulse-color, var(--success)); }
+  50% { transform: scale(1.2); opacity: 0.7; box-shadow: 0 0 15px var(--pulse-color, var(--success)); }
+}
 
 /* Film grain overlay */
 .bg-noise::before {

components.css

@@ -8,7 +8,7 @@
   height: 120vw;
   max-width: 1400px;
   max-height: 1400px;
-  border: 1px solid rgba(56, 189, 248, 0.05);
+  border: 1px solid rgba(167, 139, 250, 0.06);
   border-radius: 50%;
   z-index: -1;
   pointer-events: none;
@@ -25,15 +25,15 @@
 
 .arcane-circle::before {
   width: 80%; height: 80%;
-  border: 1px dashed rgba(226, 232, 240, 0.03);
+  border: 1px dashed rgba(255, 255, 255, 0.04);
   animation: spin-reverse 80s linear infinite;
 }
 
 .arcane-circle::after {
   width: 60%; height: 60%;
-  border: 1px solid rgba(56, 189, 248, 0.02);
+  border: 1px solid rgba(167, 139, 250, 0.03);
-  border-top-color: rgba(56, 189, 248, 0.1);
+  border-top-color: rgba(167, 139, 250, 0.14);
-  border-bottom-color: rgba(56, 189, 248, 0.1);
+  border-bottom-color: rgba(167, 139, 250, 0.14);
 }
 
 .rune-marker {
@@ -52,7 +52,7 @@
   justify-content: space-between;
   align-items: baseline;
   padding: 1.2rem 0;
-  border-bottom: 1px solid rgba(226, 232, 240, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   text-decoration: none;
   color: inherit;
   position: relative;
@@ -76,7 +76,7 @@
 
 .ledger-row:hover {
   padding-left: 1.5rem;
-  background: linear-gradient(90deg, rgba(56, 189, 248, 0.03), transparent);
+  background: linear-gradient(90deg, rgba(167, 139, 250, 0.05), transparent);
 }
 
 /* Title & Header Text */
@@ -91,11 +91,57 @@
   text-shadow: 0 0 20px var(--mithral-glow);
 }
 
+.eyebrow-rune {
+  color: var(--mithral-soft);
+  font-family: var(--font-rune);
+  font-size: 0.58rem;
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+}
+
+.glass-panel {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 24%),
+    var(--surface-card);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.06) inset,
+    0 16px 40px rgba(0, 0, 0, 0.18);
+}
+
+.arcane-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 42px;
+  padding: 0.75rem 1rem;
+  border: 1px solid rgba(167, 139, 250, 0.8);
+  border-radius: 4px;
+  background: var(--surface-card-hover);
+  color: var(--mithral);
+  font-family: var(--font-rune);
+  font-size: 0.78rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  text-decoration: none;
+  transition: all 0.25s ease;
+}
+
+.arcane-button:hover {
+  background: rgba(45, 40, 58, 0.98);
+  transform: translateY(-1px);
+  box-shadow: 0 0 22px rgba(167, 139, 250, 0.12);
+}
+
 /* Stat Cards */
 .stat-card {
-  background: var(--surface-card);
+  background:
-  border: 1px solid var(--border-arcane);
+    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 24%),
-  border-radius: 4px;
+    var(--surface-card);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
   padding: 1.5rem 1rem;
   text-align: center;
   transition: all 0.3s ease;
@@ -114,8 +160,8 @@
 
 .stat-card:hover {
   background: var(--surface-card-hover);
-  border-color: var(--arcane-blue);
+  border-color: rgba(167, 139, 250, 0.48);
-  box-shadow: 0 0 15px rgba(56, 189, 248, 0.15);
+  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.08);
   transform: translateY(-2px);
 }
 
@@ -128,7 +174,7 @@
   display: flex;
   align-items: center;
   gap: 1rem;
-  color: var(--mithral-dim);
+  color: var(--mithral-dark);
   font-family: var(--font-rune);
   font-size: 0.9rem;
   letter-spacing: 0.15em;

tailwind.preset.js

@@ -7,6 +7,7 @@ module.exports = {
         mithral: {
           DEFAULT: "var(--mithral)",
           dim: "var(--mithral-dim)",
+          soft: "var(--mithral-soft)",
           dark: "var(--mithral-dark)",
           glow: "var(--mithral-glow)",
         },
@@ -17,9 +18,12 @@ module.exports = {
         surface: {
           card: "var(--surface-card)",
           "card-hover": "var(--surface-card-hover)",
+          glass: "var(--surface-glass)",
+          "glass-strong": "var(--surface-glass-strong)",
         },
         border: {
           arcane: "var(--border-arcane)",
+          subtle: "var(--border-subtle)",
         }
       },
       fontFamily: {
@@ -32,6 +36,7 @@ module.exports = {
         "spin-reverse-slow": "spin-reverse 80s linear infinite",
         "reveal": "reveal 1s ease-out forwards",
         "pulse-dot": "pulse-dot 2s infinite",
+        "pulse-glow": "pulse-glow 2s infinite",
       },
       keyframes: {
         "spin-reverse": {
@@ -43,6 +48,10 @@ module.exports = {
         "pulse-dot": {
           "0%, 100%": { opacity: "0.5", boxShadow: "0 0 5px var(--arcane-blue)" },
           "50%": { opacity: "1", boxShadow: "0 0 15px var(--arcane-blue)" },
+        },
+        "pulse-glow": {
+          "0%, 100%": { transform: "scale(1)", opacity: "1", boxShadow: "0 0 5px var(--pulse-color, var(--success))" },
+          "50%": { transform: "scale(1.2)", opacity: "0.7", boxShadow: "0 0 15px var(--pulse-color, var(--success))" },
         }
       }
     },

variables.css

@@ -1,22 +1,26 @@
 :root {
   /* Colors */
   --obsidian: #08090C;
-  --mithral: #E2E8F0;
+  --mithral: #FFFFFF;
-  --mithral-dim: #94A3B8;
+  --mithral-dim: rgba(255, 255, 255, 0.74);
-  --mithral-dark: #334155;
+  --mithral-soft: rgba(255, 255, 255, 0.48);
-  --arcane-blue: #38BDF8;
+  --mithral-dark: rgba(255, 255, 255, 0.22);
-  --arcane-glow: rgba(56, 189, 248, 0.4);
+  --arcane-blue: #A78BFA;
-  --mithral-glow: rgba(226, 232, 240, 0.2);
+  --arcane-glow: rgba(167, 139, 250, 0.32);
+  --mithral-glow: rgba(255, 255, 255, 0.16);
   
   /* Status Colors */
   --success: #10B981;
-  --danger: #EF4444;
+  --danger: #ef4444;
   --warning: #F59E0B;
 
   /* Surfaces */
-  --surface-card: rgba(226, 232, 240, 0.02);
+  --surface-card: rgba(22, 20, 28, 0.88);
-  --surface-card-hover: rgba(56, 189, 248, 0.05);
+  --surface-card-hover: rgba(30, 27, 38, 0.94);
-  --border-arcane: rgba(56, 189, 248, 0.1);
+  --surface-glass: rgba(8, 9, 12, 0.66);
+  --surface-glass-strong: rgba(8, 9, 12, 0.86);
+  --border-arcane: rgba(167, 139, 250, 0.16);
+  --border-subtle: rgba(255, 255, 255, 0.08);
 
   /* Typography */
   --font-rune: 'Cinzel Decorative', serif;