/*
  Design tokens. Components in app.css read ONLY these variables; a theme is a block
  that overrides tokens under :root[data-theme="<id>"] (listed in app/config/theme-catalog.js).
  Display rules baked in (docs/UI-DESIGN-SYSTEM.md):
  - additive display: pure black is transparent negative space, not a surface;
  - visible surfaces stay in the dark RGB ~18–55 range, filled, no hairlines;
  - functional text ≥ 14px, body 16px, primary content/controls 20–24px+.
*/
:root {
  /* Color: text */
  --color-text: #ffffff;
  --color-text-muted: rgba(245, 250, 255, 0.9);
  --color-text-quiet: rgba(230, 243, 255, 0.76);
  --color-accent: #2388f5;
  --color-accent-soft: #86c8ff;
  --color-good: #66d8b3;
  --color-warn: #ffc76a;
  --color-bad: #ff8d9a;

  /* Color: stage */
  --color-stage: #000000;
  --color-glow-a: rgba(43, 128, 224, 0.24);
  --color-glow-b: rgba(80, 133, 218, 0.15);

  /* Surfaces (filled gradients, top → bottom) */
  --surface-panel-top: rgba(89, 133, 175, 0.46);
  --surface-panel-bottom: rgba(26, 48, 77, 0.78);
  --surface-control-top: rgba(75, 112, 151, 0.72);
  --surface-control-bottom: rgba(31, 58, 89, 0.82);
  --surface-action-top: #2d82ca;
  --surface-action-bottom: #155ca8;
  --surface-danger-top: rgba(150, 52, 70, 0.9);
  --surface-danger-bottom: rgba(92, 27, 42, 0.92);
  --surface-field-top: rgba(74, 111, 149, 0.72);
  --surface-field-bottom: rgba(27, 53, 84, 0.84);

  /* Focus: the selected state must read without color alone (border + glow + scale) */
  --focus-top: rgba(35, 107, 176, 0.94);
  --focus-bottom: rgba(18, 65, 125, 0.96);
  --focus-border: #86c8ff;
  --focus-ring: rgba(101, 181, 255, 0.42);
  --focus-scale: 1.03;

  /* Shape */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --border-width: 2px;
  --shadow-raised: 0 18px 42px rgba(5, 13, 25, 0.3);

  /* Space (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Type */
  --font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
  --font-size-caption: 14px;
  --font-size-body: 16px;
  --font-size-control: 22px;
  --font-size-title: 32px;
  --font-size-display: 40px;
  --line-height-tight: 1.15;
  --line-height-body: 1.35;

  /* Motion (30 FPS target; durations are multiples of ~33ms) */
  --motion-fast: 150ms;
  --motion-base: 230ms;
  --motion-slow: 380ms;
  --motion-ease-out: cubic-bezier(0.22, 0.75, 0.3, 1);
  --motion-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-nudge-distance: 7px;

  /* Layout: MRBD stage and safe area */
  --stage-size: 600px;
  --safe-bottom: 576px; /* y=576..600 belongs to the system bar */
  --safe-inset: 32px;
}

:root[data-theme="aurora"] {
  --color-accent: #25efff;
  --color-accent-soft: #f8fdff;
  --color-text-muted: #d8e8ff;
  --color-text-quiet: #aebfdf;
  --color-good: #79f2d5;
  --color-glow-a: rgba(193, 72, 255, 0.22);
  --color-glow-b: rgba(37, 239, 255, 0.14);
  --surface-panel-top: rgba(102, 181, 255, 0.3);
  --surface-panel-bottom: rgba(15, 43, 118, 0.32);
  --surface-control-top: rgba(100, 177, 255, 0.3);
  --surface-control-bottom: rgba(37, 88, 177, 0.22);
  --surface-action-top: #20e9ef;
  --surface-action-bottom: #1268f4;
  --focus-top: rgba(47, 160, 255, 0.58);
  --focus-bottom: rgba(63, 59, 220, 0.52);
  --focus-border: #f4feff;
  --focus-ring: rgba(37, 239, 255, 0.5);
}

:root[data-theme="minimal"] {
  --color-accent: #e8eef6;
  --color-accent-soft: #ffffff;
  --color-glow-a: rgba(255, 255, 255, 0.05);
  --color-glow-b: rgba(255, 255, 255, 0.03);
  --surface-panel-top: rgba(46, 50, 56, 0.9);
  --surface-panel-bottom: rgba(28, 30, 34, 0.92);
  --surface-control-top: rgba(52, 55, 60, 0.92);
  --surface-control-bottom: rgba(34, 36, 40, 0.94);
  --surface-action-top: #5a6270;
  --surface-action-bottom: #3a4049;
  --focus-top: rgba(92, 100, 112, 0.96);
  --focus-bottom: rgba(60, 66, 76, 0.98);
  --focus-border: #ffffff;
  --focus-ring: rgba(255, 255, 255, 0.35);
}

/* Reduced motion: the system setting or the in-app preference. */
:root[data-motion="reduced"] {
  --motion-fast: 1ms;
  --motion-base: 1ms;
  --motion-slow: 1ms;
  --motion-nudge-distance: 0px;
  --focus-scale: 1;
}