/* App-only colours that the design system does not name (yet).
   Night values reproduce the current app exactly; Cream values follow the design system. */
:root, [data-theme="light"] {
  --logo-fret: #94a3b8;
  --logo-string-high: #64748b;
  --tagline: #0a6a9c;
  --text-strong: #1b2733;
  --title-shadow: transparent;
  --surface-panel-feature: #f7ead6;
  --surface-control-feature-hover: #fff1df;
  --surface-drawer-btn: #fffaf3;
  --glow-root: transparent;
  --glow-seventh: transparent;
  --glow-action: rgba(10, 106, 156, 0.35);
  --destructive-border: #f2c9c3;
  --on-destructive: #ffffff;
  --string-shadow: transparent;
  --trail-outline: #0a6a9c;
  --quiz-sub: #566474;
  --shadow-float: 0 8px 24px rgba(92, 74, 51, 0.18);
  --wash-teal: rgba(10, 116, 128, 0.06);
  --wash-coral: rgba(214, 61, 23, 0.06);
}
[data-theme="dark"] {
  --logo-fret: #4d6a88;
  --logo-string-high: #94a3b8;
  --tagline: #38bdf8;
  --text-strong: #ffffff;
  --title-shadow: #03060a;
  --surface-panel-feature: #111e2b;
  --surface-control-feature-hover: #22384e;
  --surface-drawer-btn: #1b2a3a;
  --glow-root: rgba(242, 84, 45, 0.5);
  --glow-seventh: rgba(250, 204, 21, 0.4);
  --glow-action: rgba(56, 189, 248, 0.6);
  --destructive-border: #3a1a23;
  --on-destructive: #ffffff;
  --string-shadow: rgba(0, 0, 0, 0.8);
  --trail-outline: rgba(56, 189, 248, 0.7);
  --quiz-sub: #8098b2;
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.6);
  --wash-teal: rgba(14, 149, 164, 0.08);
  --wash-coral: rgba(242, 84, 45, 0.08);
}

/* native controls (scrollbars, range input) follow the theme */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }