/* =============================================================================
   MUSE · Design Tokens
   Light scheme (mandatory). Evolved from the PRISM Open Canvas system:
   warm paper canvas, PRISM coral/red accent, glass overlays, 8/4 spacing.
   Single source of truth — every component reads from these variables.
   ========================================================================== */

:root {
  /* ── Surfaces — warm, paper-light ─────────────────────────────────────── */
  --canvas:      #F6F4EF;   /* app background                           */
  --canvas-2:    #F1EEE7;   /* sidebar / secondary plane                */
  --surface:     #FFFFFF;   /* cards, bubbles, panels                   */
  --surface-2:   #FBFAF7;   /* subtly raised surface                    */
  --sunken:      #EDEAE2;   /* inset wells, inputs, tracks              */
  --scrim:       rgba(26, 23, 20, 0.34);  /* modal backdrop             */

  /* ── Glass — floating overlays ────────────────────────────────────────── */
  --glass:        rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.90);
  --glass-edge:   rgba(255, 255, 255, 0.72);

  /* ── Ink — warm near-black text ramp ──────────────────────────────────── */
  --ink:        #1A1714;
  --ink-2:      #423D37;
  --ink-mid:    #6B6560;
  --ink-low:    #9A938B;
  --ink-faint:  #C6BFB5;
  --on-accent:  #FFFFFF;

  /* ── Hairlines ────────────────────────────────────────────────────────── */
  --line:        rgba(26, 23, 20, 0.10);
  --line-soft:   rgba(26, 23, 20, 0.06);
  --line-strong: rgba(26, 23, 20, 0.16);

  /* ── Accent — Muse coral/red (PRISM lineage) ──────────────────────────── */
  --accent:      #E23B3B;
  --accent-hi:   #FF5A5A;
  --accent-lo:   #D0392B;
  --accent-grad: var(--accent);
  --accent-soft: rgba(226, 59, 59, 0.10);
  --accent-tint: rgba(226, 59, 59, 0.18);

  /* ── Muse mark — warm violet, used sparingly for the agent voice ──────── */
  --muse:       #7A5CF0;
  --muse-soft:  rgba(122, 92, 240, 0.10);
  --muse-grad:  linear-gradient(135deg, #9C7BFF, #6A45E6);

  /* ── Status ───────────────────────────────────────────────────────────── */
  --ok:     #2E9E6B;  --ok-soft:     rgba(46, 158, 107, 0.14);
  --warn:   #C9842B;  --warn-soft:   rgba(201, 132, 43, 0.14);
  --danger: #D63B3B;  --danger-soft: rgba(214, 59, 59, 0.10);

  /* ── Interactive overlays + status text (themed — see dark block below) ── */
  --hover:        rgba(26, 23, 20, 0.05);
  --hover-strong: rgba(26, 23, 20, 0.10);
  --danger-ink:   #9C261B;
  --warn-ink:     #8A5A12;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --r-xs: 8px;  --r-sm: 12px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 28px;
  --r-pill: 999px;

  /* ── Elevation ────────────────────────────────────────────────────────── */
  --sh-xs: 0 1px 2px rgba(26, 23, 20, 0.06);
  --sh-sm: 0 2px 8px -2px rgba(26, 23, 20, 0.10), 0 1px 2px rgba(26, 23, 20, 0.05);
  --sh-md: 0 10px 28px -10px rgba(26, 23, 20, 0.18), 0 2px 6px rgba(26, 23, 20, 0.06);
  --sh-lg: 0 28px 64px -18px rgba(26, 23, 20, 0.26), 0 8px 22px -10px rgba(26, 23, 20, 0.12);
  --sh-accent: 0 8px 24px -8px rgba(226, 59, 59, 0.42), 0 2px 8px -3px rgba(226, 59, 59, 0.32);

  /* ── Typography — PRISM design-system brand fonts (see fonts.css) ───────── */
  --font-display: "TheFuture", "GT Mechanik", -apple-system, system-ui, sans-serif;
  --font-ui:      "GT Mechanik", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "GT Mechanik Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Heading type scale (H1-H6) — major third (~1.25), boosted at the top for a
     clear hierarchy. Top three fluid so they never overflow on small screens.
     See h1-h6-typescale/ for the spec + engineering rationale. */
  --h1: clamp(32px, 5vw, 48px);
  --h2: clamp(28px, 4vw, 38px);
  --h3: clamp(24px, 3vw, 30px);
  --h4: 24px;
  --h5: 20px;
  --h6: 16px;

  /* ── Spacing — 8/4 base ───────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;  --s-8: 64px;

  /* ── Motion — US-020 spec (Motion-targeted; WAAPI shim, see motion.js) ─── */
  --dur-instant: 120ms;
  --dur-fast:    180ms;
  --dur-base:    280ms;
  --dur-slow:    440ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.45, 1);

  /* ── Layout metrics ───────────────────────────────────────────────────── */
  --sidebar-w: 300px;
  --sidebar-mini-w: 64px;
  --panel-w:   clamp(380px, 38vw, 520px);
  --topbar-h:  64px;
  --thread-max: 760px;

  --z-base: 1;
  --z-panel: 40;
  --z-flyout: 60;
  --z-modal: 80;
  --z-toast: 100;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME — warm, low-glare. Every value here overrides a light token, so
   nothing in the components needs to know dark exists. Applied via
   <html data-theme="dark"> by theme.js (and a pre-paint snippet in index.html).
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --canvas:    #16130F;
  --canvas-2:  #1C1813;
  --surface:   #221E18;
  --surface-2: #29241D;
  --sunken:    #100D0A;
  --scrim:     rgba(0, 0, 0, 0.62);

  --glass:        rgba(34, 30, 24, 0.74);
  --glass-strong: rgba(28, 24, 19, 0.92);
  --glass-edge:   rgba(255, 255, 255, 0.08);

  --ink:        #F4F0E9;
  --ink-2:      #DAD4C9;
  --ink-mid:    #ABA399;
  --ink-low:    #7E776C;
  --ink-faint:  #4C463D;
  --on-accent:  #FFFFFF;

  --line:        rgba(255, 255, 255, 0.09);
  --line-soft:   rgba(255, 255, 255, 0.05);
  --line-strong: rgba(255, 255, 255, 0.16);

  --accent:      #FF4B4B;            /* a touch brighter so it sings on dark */
  --accent-hi:   #FF6E6E;
  --accent-lo:   #E23437;
  --accent-grad: var(--accent);
  --accent-soft: rgba(255, 75, 75, 0.16);
  --accent-tint: rgba(255, 75, 75, 0.26);

  --muse:      #9B7DFF;
  --muse-soft: rgba(155, 125, 255, 0.18);
  --muse-grad: linear-gradient(135deg, #B49BFF, #7C5CF0);

  --ok:     #46C48A;  --ok-soft:     rgba(70, 196, 138, 0.18);
  --warn:   #E0A24A;  --warn-soft:   rgba(224, 162, 74, 0.16);
  --danger: #F24B4B;  --danger-soft: rgba(242, 75, 75, 0.16);

  --hover:        rgba(255, 255, 255, 0.06);
  --hover-strong: rgba(255, 255, 255, 0.12);
  --danger-ink:   #FF9C8A;
  --warn-ink:     #E7BE83;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --sh-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40);
  --sh-md: 0 10px 28px -10px rgba(0, 0, 0, 0.60), 0 2px 6px rgba(0, 0, 0, 0.40);
  --sh-lg: 0 28px 64px -18px rgba(0, 0, 0, 0.70), 0 8px 22px -10px rgba(0, 0, 0, 0.50);
  --sh-accent: 0 8px 24px -8px rgba(255, 75, 75, 0.50), 0 2px 8px -3px rgba(255, 75, 75, 0.40);
}

/* Honor the OS reduced-motion preference globally (US-020). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}