/*
  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(250, 242, 255, 0.9);
  --color-text-quiet: rgba(234, 222, 246, 0.76);
  --color-accent: #ff5fb0;
  --color-accent-soft: #ffb3da;
  --color-good: #66d8b3;
  --color-warn: #ffc76a;
  --color-bad: #ff8d9a;
  /* Cast: one filled color per speaker. Identity never depends on it alone: every
     avatar also has its own shape and initial (app/domain/cast.js). */
  --cast-jace: #c8453f;
  --cast-rafe: #b9781f;
  --cast-eli: #3f7fd0;
  --cast-dom: #2f9a68;
  --cast-cole: #6f63c9;
  --cast-mika: #b54f96;
  --cast-unknown: rgb(72, 80, 96);
  --cast-you: #c93a93;
  --cast-ink: #ffffff;
  /* Light tints of the same hues, for names and small marks on dark surfaces. */
  --cast-jace-soft: #ff9f98;
  --cast-rafe-soft: #ffcb7c;
  --cast-eli-soft: #9ecaff;
  --cast-dom-soft: #88e5b9;
  --cast-cole-soft: #c5bbff;
  --cast-mika-soft: #f7a9df;
  --cast-unknown-soft: #c9d2e0;

  /* Portraits (app/ui/chat-art.js). Hair and ink stay above RGB ~40 so the additive
     display draws them instead of leaving holes. */
  --skin-1: #f2c9a8;
  --skin-2: #dba27c;
  --skin-3: #b97b55;
  --skin-4: #8f5c3c;
  --skin-shade: rgba(60, 30, 20, 0.22);
  --portrait-ink: rgb(66, 40, 46);
  --portrait-mouth: #9a3047;
  --portrait-teeth: #fff6ee;
  --portrait-blush: rgba(255, 118, 140, 0.5);
  --portrait-stubble: rgba(84, 56, 44, 0.38);
  --portrait-metal: #f3e3a2;
  --portrait-frame: rgb(78, 62, 88);
  --hair-jace: rgb(86, 60, 50);
  --hair-jace-hi: rgb(128, 92, 74);
  --hair-rafe: #b07a3c;
  --hair-eli: #c98a4e;
  --hair-dom: rgb(78, 56, 48);
  --hair-cole: rgb(98, 94, 120);
  --hair-mika: #e06aa2;
  --shirt-jace: rgb(78, 58, 62);
  --shirt-jace-2: rgb(104, 78, 82);
  --tee-jace: #e2dbe6;
  --shirt-rafe: #ece2cf;
  --shirt-rafe-2: #cbbda5;
  --shirt-eli: #4f86c9;
  --hat-eli: #d9a441;
  --hat-eli-band: #b98a2f;
  --shirt-dom: #33a06e;
  --band-dom: #ff5f6d;
  --shirt-cole: rgb(88, 80, 146);
  --shirt-cole-2: rgb(116, 106, 178);
  --shirt-mika: rgb(66, 64, 80);
  --camera-mika: rgb(92, 92, 104);
  --lens-mika: #9ecaff;
  --shadow-unknown: rgb(44, 48, 60);

  /* Sticker pack */
  --sticker-cut: #fff7ea;
  --sticker-face: #ffd34d;
  --sticker-hand: #ffbf2e;
  --sticker-ink: rgb(76, 46, 34);
  --sticker-mouth: #a3303f;
  --sticker-tongue: #ff7b8a;
  --sticker-blush: rgba(255, 112, 122, 0.55);
  --sticker-heart: #ff4d7a;
  --sticker-star: #ff8a3d;
  --sticker-fire: #ff7a33;
  --sticker-halo: #fff2a8;
  --sticker-cap: #4b6bd6;
  --sticker-z: #9ecaff;
  --sticker-mug: #e85d75;
  --sticker-steam: #eef0f8;
  --sticker-tear: #6cc3ff;
  --sticker-stick: #c98a4b;
  --sticker-caption: #ffffff;
  --sticker-caption-edge: #5a2a8c;

  /* Chat */
  --surface-bubble-top: rgb(60, 47, 86);
  --surface-bubble-bottom: rgb(41, 32, 62);
  --surface-system: rgb(38, 31, 52);
  --surface-photo: rgb(26, 20, 40);
  --surface-print: rgb(52, 46, 66);
  --surface-future-top: rgb(44, 48, 58);
  --surface-future-bottom: rgb(26, 29, 37);
  --avatar-shine: linear-gradient(160deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 58%);

  /* Color: stage */
  --color-stage: #000000;
  --color-glow-a: rgba(196, 60, 168, 0.22);
  --color-glow-b: rgba(110, 72, 230, 0.16);

  /* Surfaces (filled gradients, top → bottom) */
  --surface-panel-top: rgba(98, 66, 136, 0.52);
  --surface-panel-bottom: rgba(42, 27, 68, 0.84);
  --surface-control-top: rgba(88, 64, 124, 0.76);
  --surface-control-bottom: rgba(46, 31, 74, 0.86);
  --surface-action-top: #c93a93;
  --surface-action-bottom: #7b2fc0;
  --surface-danger-top: rgba(150, 52, 70, 0.9);
  --surface-danger-bottom: rgba(92, 27, 42, 0.92);
  --surface-field-top: rgba(86, 62, 122, 0.74);
  --surface-field-bottom: rgba(40, 27, 66, 0.86);
  /* Locked or empty slots (a locked level, a path not reached yet) */
  --surface-locked: rgb(38, 42, 52);

  /* Focus: the selected state must read without color alone (border + glow + scale) */
  --focus-top: rgba(152, 54, 142, 0.94);
  --focus-bottom: rgba(92, 40, 150, 0.96);
  --focus-border: #ffc2e4;
  --focus-ring: rgba(255, 120, 200, 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="midnight"] {
  --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-glow-a: rgba(43, 128, 224, 0.24);
  --color-glow-b: rgba(80, 133, 218, 0.15);
  --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-field-top: rgba(74, 111, 149, 0.72);
  --surface-field-bottom: rgba(27, 53, 84, 0.84);
  --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);
  --surface-bubble-top: rgba(70, 104, 142, 0.78);
  --surface-bubble-bottom: rgba(34, 60, 92, 0.86);
  --surface-system: rgb(34, 40, 52);
  --surface-photo: rgb(26, 32, 44);
  --cast-you: #2d82ca;
  --surface-print: rgb(44, 52, 68);
}

: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;
}