/* Layer Cascade: Define order (lowest → highest priority) */
@layer tokens, base, utilities, components, overrides, legacy;

@layer tokens {
:root {
  --bg-primary: #141a24;
  --bg-secondary: #1f2937;
  --text-primary: #e4e6eb;
  --text-secondary: #8b92a4;
  --grid-gap: 3px;
  --transition-duration: 0.6s;
  --pulse-duration: 4s;
  --thermal-intensity: 1;
  --panel-surface: linear-gradient(
    145deg,
    rgba(36, 28, 46, 0.92) 0%,
    rgba(24, 30, 52, 0.9) 100%
  );
  --panel-border: rgba(248, 113, 113, 0.18);
  --panel-header-bg: linear-gradient(
    90deg,
    rgba(248, 113, 113, 0.14) 0%,
    rgba(251, 146, 60, 0.08) 100%
  );
  --panel-gentle-glow: radial-gradient(
    circle at 85% 5%,
    rgba(248, 113, 113, 0.22),
    transparent 55%
  );
  --panel-card-bg: linear-gradient(
    135deg,
    rgba(31, 28, 48, 0.84) 0%,
    rgba(25, 32, 52, 0.72) 100%
  );
  --surface-glass-strong: linear-gradient(
    135deg,
    rgba(31, 41, 55, 0.8) 0%,
    rgba(20, 26, 36, 0.8) 100%
  );
  --surface-glass-soft: linear-gradient(
    135deg,
    rgba(31, 41, 55, 0.78) 0%,
    rgba(20, 26, 36, 0.78) 100%
  );
  --surface-glass-elevated: linear-gradient(
    135deg,
    rgba(31, 41, 55, 0.82) 0%,
    rgba(20, 26, 36, 0.82) 100%
  );
  --surface-glass-elevated-soft: linear-gradient(
    135deg,
    rgba(31, 41, 55, 0.82) 0%,
    rgba(20, 26, 36, 0.78) 100%
  );
  --surface-glass-rich: linear-gradient(
    135deg,
    rgba(31, 41, 55, 0.94) 0%,
    rgba(20, 26, 36, 0.92) 100%
  );
  --surface-glass-intense: linear-gradient(
    135deg,
    rgba(31, 41, 55, 0.98) 0%,
    rgba(20, 26, 36, 0.98) 100%
  );
  --surface-glass-hover: linear-gradient(
    135deg,
    rgba(31, 41, 55, 0.9) 0%,
    rgba(20, 26, 36, 0.9) 100%
  );
  --surface-glass-muted: linear-gradient(
    135deg,
    rgba(31, 41, 55, 0.75) 0%,
    rgba(20, 26, 36, 0.75) 100%
  );
  --text-gradient-primary: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    var(--accent-secondary) 50%,
    var(--accent-tertiary) 100%
  );
  --text-gradient-triple: linear-gradient(
    135deg,
    var(--accent-primary),
    var(--accent-secondary),
    var(--accent-tertiary)
  );
  --text-gradient-reverse: linear-gradient(
    135deg,
    var(--accent-tertiary),
    var(--accent-secondary),
    var(--accent-primary)
  );
  --letter-spacing-tight: -0.5px;
  --letter-spacing-compact: 0.5px;
  --letter-spacing-wide: 1px;
  --letter-spacing-extra-wide: 1.5px;
  --letter-spacing-ultra-wide: 2px;
  --letter-spacing-max: 2.5px;
  --letter-spacing-slight: 0.2px;
  --letter-spacing-medium: 0.8px;
  --letter-spacing-midwide: 0.9px;
  --letter-spacing-soft-wide: 1.2px;
  --letter-spacing-between-wide: 1.3px;
  --letter-spacing-expanded: 1.6px;
  --letter-spacing-narrow: -0.3px;
  --surface-input-bg: rgba(15, 23, 42, 0.6);
  --surface-input-strong: rgba(15, 23, 42, 0.7);
  --surface-highlight-soft: radial-gradient(
    circle at top left,
    rgba(255, 255, 255, 0.06),
    transparent 55%
  );
  --surface-highlight-medium: radial-gradient(
    circle at top left,
    rgba(255, 255, 255, 0.08),
    transparent 60%
  );
  --surface-highlight-glint: radial-gradient(
    circle at top left,
    rgba(255, 255, 255, 0.05),
    transparent 60%
  );
  --surface-highlight-strong: radial-gradient(
    circle at top left,
    rgba(255, 255, 255, 0.1),
    transparent 60%
  );
  --surface-highlight-intense: radial-gradient(
    circle at top left,
    rgba(255, 255, 255, 0.12),
    transparent 60%
  );
  --surface-glint-linear: linear-gradient(
    135deg,
    rgba(31, 41, 55, 0.85),
    rgba(20, 26, 36, 0.82)
  );
  --surface-glint-accent: linear-gradient(
    135deg,
    var(--accent-glow-medium) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  --accent-gradient-secondary-primary: linear-gradient(
    135deg,
    var(--accent-secondary),
    var(--accent-primary)
  );
  --accent-gradient-tertiary-secondary: linear-gradient(
    135deg,
    var(--accent-tertiary),
    var(--accent-secondary)
  );
  --accent-gradient-hot: var(--accent-gradient-secondary-primary);
  --accent-gradient-warm: var(--accent-gradient-tertiary-secondary);
  --action-surface: rgba(248, 113, 113, 0.15);
  --action-border: rgba(248, 113, 113, 0.25);
  --action-surface-hover: rgba(251, 146, 60, 0.2);
  --panel-field-bg: rgba(15, 23, 42, 0.68);
  --panel-field-border: rgba(248, 113, 113, 0.22);
  --panel-field-border-hover: rgba(251, 146, 60, 0.4);
  --panel-field-shadow: 0 10px 26px rgba(248, 113, 113, 0.22);
  --panel-field-shadow-soft: 0 6px 18px rgba(248, 113, 113, 0.18);
  --panel-text-muted: rgba(148, 163, 184, 0.88);
  --panel-focus-ring: 0 0 0 3px rgba(251, 146, 60, 0.18);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.3, 0.64, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.33, 1, 0.68, 1);
  /* Motion Contract: Immutable animation timings */
  --motion-fadeIn: 0.25s ease;
  --motion-fadeIn-delayed: 1s ease-out;
  --motion-fadeIn-delayed-0-2s: 1s ease-out 0.2s both;
  --motion-fadeIn-delayed-0-3s: 1s ease-out 0.3s both;
  --motion-fadeIn-delayed-0-4s: 1s ease-out 0.4s both;
  --motion-fadeIn-delayed-0-8s: 1s ease-out 0.8s both;
  --motion-fadeInUp: 0.8s ease-out 0.6s both;
  --motion-fadeInDown: 0.8s ease-out;
  --motion-modalFloat: 0.5s var(--ease-overshoot);
  --motion-dropdownReveal: 0.28s var(--ease-snappy);
  --motion-tileEntry: 0.6s ease-out both;
  --motion-panelCardLift: 0.6s ease both;
  --motion-accordionReveal: 0.45s var(--ease-smooth);
  --motion-cpFade: 280ms ease-out both;
  --motion-shimmerLine: 3.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  --motion-ambientGlow: 10s ease-in-out infinite;
  --motion-thermalWave: 3s ease-in-out infinite;
  --motion-livePulse: 2s ease-in-out infinite;
  --motion-statusPulse: 2s ease-in-out infinite;
  --motion-fetchingPulse: 1.5s ease-in-out infinite;
  --motion-invalidPulse: 2s ease-in-out infinite;
  --motion-pulse: 2s ease-in-out infinite;
  --motion-pulseFast: 1s ease-in-out infinite;
  --motion-breathe: 3s ease-in-out infinite;
  --motion-breatheSlow: 4s ease-in-out infinite;
  --motion-spin: 0.8s linear infinite;
  /* Semantic Tokens: Role-based aliases (no visual change) */
  /* Colors */
  --color/surface/input-bg: var(--surface-input-bg);
  --color/surface/card-bg: var(--panel-card-bg);
  --color/surface/panel-bg: var(--panel-surface);
  --color/text/primary: var(--text-primary);
  --color/text/secondary: var(--text-secondary);
  --color/text/muted: var(--panel-text-muted);
  --color/border/subtle: var(--accent-border-subtle);
  --color/border/medium: var(--accent-border-medium);
  --color/border/strong: var(--accent-border-strong);
  --color/accent/primary: var(--accent-primary);
  --color/accent/secondary: var(--accent-secondary);
  --color/accent/tertiary: var(--accent-tertiary);
  /* Spacing (magic numbers) */
  --space/xs: 8px;
  --space/sm: 12px;
  --space/md: 14px;
  --space/lg: 18px;
  --space/xl: 20px;
  --space/2xl: 24px;
  --space/3xl: 28px;
  --space/4xl: 32px;
  --space/5xl: 40px;
  /* Border Radius */
  --radius/sm: 10px;
  --radius/md: 12px;
  --radius/lg: 14px;
  --radius/xl: 16px;
  --radius/2xl: 18px;
  --radius/3xl: 20px;
  --radius/4xl: 24px;
  --radius/full: 50%;
  --radius/pill: 999px;
  /* Elevation (Box Shadows) */
  --elevation/1: 0 2px 8px rgba(0, 0, 0, 0.2);
  --elevation/2: 0 4px 12px rgba(0, 0, 0, 0.2);
  --elevation/3: 0 10px 28px rgba(0, 0, 0, 0.35);
  --elevation/4: 0 10px 40px rgba(0, 0, 0, 0.4);
  --elevation/5: 0 16px 40px rgba(0, 0, 0, 0.4);
  --elevation/6: 0 24px 48px rgba(0, 0, 0, 0.5);
  --elevation/modal: 0 30px 70px rgba(0, 0, 0, 0.55);
  /* Component-specific heights */
  --height/input: 52px;
  --height/button: 44px;
  --tile-neutral-1: #2a2a2a;
  --tile-neutral-2: #1a1a1a;
  --tile-neutral-brightness: 0.9;
  --tile-neutral-saturation: 0.75;
  --tile-glow-positive-soft: rgba(255, 74, 46, 0.25);
  --tile-glow-positive-strong: rgba(255, 74, 46, 0.5);
  --tile-glow-ring-outer-color: rgba(248, 113, 113, 0.3);
  --tile-glow-ring-border-color: rgba(248, 113, 113, 0.22);
  --accent-primary: #f87171;
  --accent-secondary: #fb923c;
  --accent-tertiary: #fbbf24;
  --accent-border-subtle: rgba(248, 113, 113, 0.15);
  --accent-border-medium: rgba(248, 113, 113, 0.22);
  --accent-border-strong: rgba(251, 146, 60, 0.4);
  --accent-glow-soft: rgba(248, 113, 113, 0.2);
  --accent-glow-medium: rgba(251, 146, 60, 0.35);
  --accent-glow-strong: rgba(251, 146, 60, 0.6);
}

/* Theme: Thermal (default) */
:root,
body[data-theme="thermal"] {
  --loss-extreme: #1e3a5f;
  --loss-high: #2e4a7f;
  --loss-medium: #3e5a9f;
  --loss-low: #4e6abf;
  --neutral: #5a5a5a;
  --gain-low: #bf6a4e;
  --gain-medium: #df5a3e;
  --gain-high: #ff4a2e;
  --gain-extreme: #ff2a1e;
  --text-gradient-primary: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    var(--accent-secondary) 50%,
    var(--accent-tertiary) 100%
  );
  --text-gradient-triple: linear-gradient(
    135deg,
    var(--accent-primary),
    var(--accent-secondary),
    var(--accent-tertiary)
  );
  --text-gradient-reverse: linear-gradient(
    135deg,
    var(--accent-tertiary),
    var(--accent-secondary),
    var(--accent-primary)
  );
  --accent-gradient-secondary-primary: linear-gradient(
    135deg,
    var(--accent-secondary),
    var(--accent-primary)
  );
  --accent-gradient-tertiary-secondary: linear-gradient(
    135deg,
    var(--accent-tertiary),
    var(--accent-secondary)
  );
  --accent-gradient-hot: var(--accent-gradient-secondary-primary);
  --accent-gradient-warm: var(--accent-gradient-tertiary-secondary);
}

/* Theme: Matrix */
body[data-theme="matrix"] {
  --loss-extreme: #001a00;
  --loss-high: #003300;
  --loss-medium: #004d00;
  --loss-low: #006600;
  --neutral: #1a1a1a;
  --gain-low: #33cc33;
  --gain-medium: #00ff00;
  --gain-high: #66ff66;
  --gain-extreme: #99ff99;
  --tile-neutral-1: #0f2e1d;
  --tile-neutral-2: #081f14;
  --tile-neutral-brightness: 0.94;
  --tile-neutral-saturation: 0.85;
  --tile-glow-positive-soft: rgba(74, 222, 128, 0.28);
  --tile-glow-positive-strong: rgba(110, 231, 183, 0.55);
  --tile-glow-ring-outer-color: rgba(16, 185, 129, 0.3);
  --tile-glow-ring-border-color: rgba(45, 212, 191, 0.26);
  --panel-surface: linear-gradient(
    145deg,
    rgba(16, 36, 26, 0.92) 0%,
    rgba(10, 24, 18, 0.9) 100%
  );
  --panel-border: rgba(34, 197, 94, 0.22);
  --panel-header-bg: linear-gradient(
    90deg,
    rgba(34, 197, 94, 0.16) 0%,
    rgba(45, 212, 191, 0.08) 100%
  );
  --panel-gentle-glow: radial-gradient(
    circle at 85% 5%,
    rgba(34, 197, 94, 0.22),
    transparent 55%
  );
  --panel-card-bg: linear-gradient(
    135deg,
    rgba(14, 32, 24, 0.86) 0%,
    rgba(12, 26, 20, 0.74) 100%
  );
  --panel-field-bg: rgba(10, 24, 18, 0.72);
  --panel-field-border: rgba(34, 197, 94, 0.24);
  --panel-field-border-hover: rgba(16, 185, 129, 0.45);
  --panel-field-shadow: 0 10px 26px rgba(34, 197, 94, 0.24);
  --panel-field-shadow-soft: 0 6px 18px rgba(34, 197, 94, 0.18);
  --panel-focus-ring: 0 0 0 3px rgba(16, 185, 129, 0.2);
  --accent-primary: #22c55e;
  --accent-secondary: #10b981;
  --accent-tertiary: #34d399;
  --accent-border-subtle: rgba(34, 197, 94, 0.15);
  --accent-border-medium: rgba(34, 197, 94, 0.22);
  --accent-border-strong: rgba(16, 185, 129, 0.4);
  --accent-glow-soft: rgba(34, 197, 94, 0.2);
  --accent-glow-medium: rgba(16, 185, 129, 0.35);
  --accent-glow-strong: rgba(16, 185, 129, 0.6);
  --panel-field-shadow: 0 10px 26px rgba(34, 197, 94, 0.26);
  --panel-field-shadow-soft: 0 6px 18px rgba(34, 197, 94, 0.2);
  --panel-focus-ring: 0 0 0 3px rgba(34, 197, 94, 0.2);
  --accent-gradient-secondary-primary: linear-gradient(
    135deg,
    var(--accent-secondary),
    var(--accent-primary)
  );
  --accent-gradient-tertiary-secondary: linear-gradient(
    135deg,
    var(--accent-tertiary),
    var(--accent-secondary)
  );
  --accent-gradient-hot: var(--accent-gradient-secondary-primary);
  --accent-gradient-warm: var(--accent-gradient-tertiary-secondary);
  --text-gradient-primary: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    var(--accent-secondary) 50%,
    var(--accent-tertiary) 100%
  );
  --text-gradient-triple: linear-gradient(
    135deg,
    var(--accent-primary),
    var(--accent-secondary),
    var(--accent-tertiary)
  );
  --text-gradient-reverse: linear-gradient(
    135deg,
    var(--accent-tertiary),
    var(--accent-secondary),
    var(--accent-primary)
  );
}

/* Theme: Ocean */
body[data-theme="ocean"] {
  --loss-extreme: #011627;
  --loss-high: #023e8a;
  --loss-medium: #0077b6;
  --loss-low: #00b4d8;
  --neutral: #7a93b0;
  --gain-low: #48d2c8;
  --gain-medium: #2ec4b6;
  --gain-high: #1aa3a0;
  --gain-extreme: #0b7285;
  --tile-neutral-1: #10263f;
  --tile-neutral-2: #0b1b2d;
  --tile-neutral-brightness: 0.93;
  --tile-neutral-saturation: 0.82;
  --tile-glow-positive-soft: rgba(56, 189, 248, 0.28);
  --tile-glow-positive-strong: rgba(96, 165, 250, 0.52);
  --tile-glow-ring-outer-color: rgba(59, 130, 246, 0.28);
  --tile-glow-ring-border-color: rgba(56, 189, 248, 0.26);
  --panel-surface: linear-gradient(
    145deg,
    rgba(18, 42, 63, 0.92) 0%,
    rgba(10, 28, 45, 0.9) 100%
  );
  --panel-border: rgba(56, 189, 248, 0.22);
  --panel-header-bg: linear-gradient(
    90deg,
    rgba(56, 189, 248, 0.16) 0%,
    rgba(37, 99, 235, 0.08) 100%
  );
  --panel-gentle-glow: radial-gradient(
    circle at 85% 5%,
    rgba(37, 164, 245, 0.22),
    transparent 55%
  );
  --panel-card-bg: linear-gradient(
    135deg,
    rgba(16, 35, 52, 0.86) 0%,
    rgba(13, 28, 46, 0.74) 100%
  );
  --panel-field-bg: rgba(12, 26, 40, 0.72);
  --panel-field-border: rgba(59, 130, 246, 0.24);
  --panel-field-border-hover: rgba(56, 189, 248, 0.45);
  --panel-field-shadow: 0 10px 26px rgba(56, 189, 248, 0.24);
  --panel-field-shadow-soft: 0 6px 18px rgba(56, 189, 248, 0.18);
  --panel-focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.2);
  --accent-primary: #3b82f6;
  --accent-secondary: #38bdf8;
  --accent-tertiary: #60a5fa;
  --accent-border-subtle: rgba(59, 130, 246, 0.15);
  --accent-border-medium: rgba(59, 130, 246, 0.22);
  --accent-border-strong: rgba(56, 189, 248, 0.4);
  --accent-glow-soft: rgba(59, 130, 246, 0.2);
  --accent-glow-medium: rgba(56, 189, 248, 0.35);
  --accent-glow-strong: rgba(56, 189, 248, 0.6);
  --panel-field-shadow: 0 10px 26px rgba(59, 130, 246, 0.26);
  --panel-field-shadow-soft: 0 6px 18px rgba(56, 189, 248, 0.2);
  --panel-focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.22);
  --accent-gradient-secondary-primary: linear-gradient(
    135deg,
    var(--accent-secondary),
    var(--accent-primary)
  );
  --accent-gradient-tertiary-secondary: linear-gradient(
    135deg,
    var(--accent-tertiary),
    var(--accent-secondary)
  );
  --accent-gradient-hot: var(--accent-gradient-secondary-primary);
  --accent-gradient-warm: var(--accent-gradient-tertiary-secondary);
  --text-gradient-primary: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    var(--accent-secondary) 50%,
    var(--accent-tertiary) 100%
  );
  --text-gradient-triple: linear-gradient(
    135deg,
    var(--accent-primary),
    var(--accent-secondary),
    var(--accent-tertiary)
  );
  --text-gradient-reverse: linear-gradient(
    135deg,
    var(--accent-tertiary),
    var(--accent-secondary),
    var(--accent-primary)
  );
}

/* Theme: Sunset */
body[data-theme="sunset"] {
  --loss-extreme: #1a1a2e;
  --loss-high: #2e2e4e;
  --loss-medium: #4a4a6a;
  --loss-low: #6666aa;
  --neutral: #4a4a4a;
  --gain-low: #ff6b35;
  --gain-medium: #ff8c42;
  --gain-high: #ffa500;
  --gain-extreme: #ffb347;
  --tile-neutral-1: #2f1d2c;
  --tile-neutral-2: #221424;
  --tile-neutral-brightness: 0.92;
  --tile-neutral-saturation: 0.82;
  --tile-glow-positive-soft: rgba(251, 191, 36, 0.3);
  --tile-glow-positive-strong: rgba(249, 115, 22, 0.56);
  --tile-glow-ring-outer-color: rgba(249, 115, 22, 0.3);
  --tile-glow-ring-border-color: rgba(253, 186, 116, 0.28);
  --panel-surface: linear-gradient(
    145deg,
    rgba(44, 26, 32, 0.92) 0%,
    rgba(38, 20, 26, 0.9) 100%
  );
  --panel-border: rgba(251, 146, 60, 0.24);
  --panel-header-bg: linear-gradient(
    90deg,
    rgba(251, 146, 60, 0.18) 0%,
    rgba(248, 113, 113, 0.1) 100%
  );
  --panel-gentle-glow: radial-gradient(
    circle at 85% 5%,
    rgba(251, 146, 60, 0.22),
    transparent 55%
  );
  --panel-card-bg: linear-gradient(
    135deg,
    rgba(40, 24, 30, 0.86) 0%,
    rgba(33, 19, 25, 0.72) 100%
  );
  --panel-field-bg: rgba(34, 21, 26, 0.72);
  --panel-field-border: rgba(251, 146, 60, 0.24);
  --panel-field-border-hover: rgba(249, 115, 22, 0.45);
  --panel-field-shadow: 0 10px 26px rgba(249, 115, 22, 0.24);
  --panel-field-shadow-soft: 0 6px 18px rgba(249, 115, 22, 0.18);
  --panel-focus-ring: 0 0 0 3px rgba(249, 115, 22, 0.2);
  --accent-primary: #fb923c;
  --accent-secondary: #f97316;
  --accent-tertiary: #fbbf24;
  --accent-border-subtle: rgba(251, 146, 60, 0.15);
  --accent-border-medium: rgba(251, 146, 60, 0.22);
  --accent-border-strong: rgba(249, 115, 22, 0.4);
  --accent-glow-soft: rgba(251, 146, 60, 0.2);
  --accent-glow-medium: rgba(249, 115, 22, 0.35);
  --accent-glow-strong: rgba(249, 115, 22, 0.6);
  --panel-field-shadow: 0 10px 26px rgba(251, 146, 60, 0.28);
  --panel-field-shadow-soft: 0 6px 18px rgba(249, 115, 22, 0.22);
  --panel-focus-ring: 0 0 0 3px rgba(249, 115, 22, 0.22);
  --accent-gradient-secondary-primary: linear-gradient(
    135deg,
    var(--accent-secondary),
    var(--accent-primary)
  );
  --accent-gradient-tertiary-secondary: linear-gradient(
    135deg,
    var(--accent-tertiary),
    var(--accent-secondary)
  );
  --accent-gradient-hot: var(--accent-gradient-secondary-primary);
  --accent-gradient-warm: var(--accent-gradient-tertiary-secondary);
  --text-gradient-primary: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    var(--accent-secondary) 50%,
    var(--accent-tertiary) 100%
  );
  --text-gradient-triple: linear-gradient(
    135deg,
    var(--accent-primary),
    var(--accent-secondary),
    var(--accent-tertiary)
  );
  --text-gradient-reverse: linear-gradient(
    135deg,
    var(--accent-tertiary),
    var(--accent-secondary),
    var(--accent-primary)
  );
}

/* Theme: Monochrome */
body[data-theme="monochrome"] {
  --loss-extreme: #c4c8cf;
  --loss-high: #d1d5dc;
  --loss-medium: #dee1e7;
  --loss-low: #eaedf2;
  --neutral: #f3f4f6;
  --gain-low: #cccccc;
  --gain-medium: #dddddd;
  --gain-high: #eeeeee;
  --gain-extreme: #ffffff;
  --tile-neutral-1: #e9ecf2;
  --tile-neutral-2: #d8dce4;
  --tile-neutral-brightness: 0.97;
  --tile-neutral-saturation: 0.4;
  --tile-glow-positive-soft: rgba(226, 232, 240, 0.35);
  --tile-glow-positive-strong: rgba(241, 245, 249, 0.55);
  --tile-glow-ring-outer-color: rgba(148, 163, 184, 0.32);
  --tile-glow-ring-border-color: rgba(226, 232, 240, 0.28);
  --panel-surface: linear-gradient(
    145deg,
    rgba(54, 60, 72, 0.9) 0%,
    rgba(40, 46, 60, 0.86) 100%
  );
  --panel-border: rgba(209, 213, 219, 0.24);
  --panel-header-bg: linear-gradient(
    90deg,
    rgba(229, 231, 235, 0.18) 0%,
    rgba(148, 163, 184, 0.1) 100%
  );
  --panel-gentle-glow: radial-gradient(
    circle at 85% 5%,
    rgba(209, 213, 219, 0.3),
    transparent 55%
  );
  --panel-card-bg: linear-gradient(
    135deg,
    rgba(46, 52, 64, 0.86) 0%,
    rgba(37, 43, 55, 0.74) 100%
  );
  --panel-field-bg: rgba(42, 48, 60, 0.72);
  --panel-field-border: rgba(148, 163, 184, 0.3);
  --panel-field-border-hover: rgba(148, 163, 184, 0.5);
  --panel-field-shadow: 0 10px 26px rgba(148, 163, 184, 0.22);
  --panel-field-shadow-soft: 0 6px 18px rgba(148, 163, 184, 0.16);
  --panel-focus-ring: 0 0 0 3px rgba(148, 163, 184, 0.22);
  --accent-primary: #94a3b8;
  --accent-secondary: #cbd5e1;
  --accent-tertiary: #e2e8f0;
  --accent-border-subtle: rgba(148, 163, 184, 0.15);
  --accent-border-medium: rgba(148, 163, 184, 0.22);
  --accent-border-strong: rgba(148, 163, 184, 0.4);
  --accent-glow-soft: rgba(148, 163, 184, 0.2);
  --accent-glow-medium: rgba(148, 163, 184, 0.35);
  --accent-glow-strong: rgba(148, 163, 184, 0.6);
  --panel-field-shadow: 0 10px 26px rgba(148, 163, 184, 0.28);
  --panel-field-shadow-soft: 0 6px 18px rgba(148, 163, 184, 0.22);
  --panel-focus-ring: 0 0 0 3px rgba(148, 163, 184, 0.24);
  --accent-gradient-secondary-primary: linear-gradient(
    135deg,
    var(--accent-secondary),
    var(--accent-primary)
  );
  --accent-gradient-tertiary-secondary: linear-gradient(
    135deg,
    var(--accent-tertiary),
    var(--accent-secondary)
  );
  --accent-gradient-hot: var(--accent-gradient-secondary-primary);
  --accent-gradient-warm: var(--accent-gradient-tertiary-secondary);
  --text-gradient-primary: linear-gradient(
    135deg,
    var(--accent-primary) 0%,
    var(--accent-secondary) 50%,
    var(--accent-tertiary) 100%
  );
  --text-gradient-triple: linear-gradient(
    135deg,
    var(--accent-primary),
    var(--accent-secondary),
    var(--accent-tertiary)
  );
  --text-gradient-reverse: linear-gradient(
    135deg,
    var(--accent-tertiary),
    var(--accent-secondary),
    var(--accent-primary)
  );
}
}