/* ═══════════════════════════════════════════════════════════════════════════
   AETERIA — tokens.css (THE TOKEN LAW)
   Every color in the product resolves through these custom properties.
   Dark is the default; light inverts through [data-theme="light"];
   auto follows the OS through [data-theme="auto"] + prefers-color-scheme.
   Design law: gray-dark ground · amber light · 1px glass edges ·
   particles amber on dark, black ink on light.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Typography — the six-size scale (S5.2): 11 · 13 · 15 · 20 · 28 · 44 */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-hero: 44px;

  /* Motion — water-weighted, never snappy */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-1: 0.18s;
  --dur-2: 0.45s;
  --dur-3: 0.9s;

  /* ── Core colors (dark ground — the default) ─────────────────────────── */
  --accent: #E8641A;
  --accent-bright: #FFB347;
  --accent-soft: rgba(232, 100, 26, 0.14);
  --accent-hover: #F0722A;
  --accent-on: #FFF6ED;          /* text on amber buttons */
  --gold: #C4780A;
  --steel: #4A6FA5;               /* accent only, never a background */
  --steel-bright: #8FA8CC;
  --mood-hue: 30;

  /* Text & ground */
  --text-primary: #EDEDEE;
  --text-secondary: #A7A7AC;
  --text-tertiary: #8A8A8E;

  --bg: #161618;
  --bg-elevated: #1C1C1F;
  --bg-sunken: #111113;
  --ground: #161618;
  --elevated: #1C1C1F;
  --elevated-2: #222226;

  /* Glass & lines */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --hover-tint: rgba(255, 255, 255, 0.10);
  --btn-bg: rgba(255, 255, 255, 0.06);
  --btn-bg-hover: rgba(255, 255, 255, 0.10);
  --btn-text: #E8E8EA;
  --btn-border: rgba(255, 255, 255, 0.1);
  --input-bg: rgba(22, 22, 24, 0.6);
  --input-bg-focus: rgba(26, 26, 30, 0.75);
  --placeholder: #71717A;

  /* Satin panel (chat column, form panel, tablet slab) */
  --panel-sheen: rgba(255, 255, 255, 0.035);
  --panel-shade: rgba(0, 0, 0, 0.25);
  --panel-grad-1: rgba(22, 22, 26, 0.86);
  --panel-grad-2: rgba(13, 13, 16, 0.94);
  --panel-border: rgba(255, 255, 255, 0.09);
  --panel-shadow: 0 16px 52px rgba(0, 0, 0, 0.55);
  --panel-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --panel-inset-deep: inset 0 0 32px rgba(0, 0, 0, 0.35);
  --msg-bg: rgba(255, 255, 255, 0.04);
  --msg-border: rgba(255, 255, 255, 0.05);

  /* Overlays & bars */
  --scrim: rgba(10, 10, 12, 0.6);
  --overlay-grad-1: rgba(22, 22, 26, 0.96);
  --overlay-grad-2: rgba(10, 10, 12, 0.98);
  --nav-bg: rgba(22, 22, 24, 0.72);
  --bar-bg: #222226;
  --scrollbar-thumb: #2E2E33;
  --tooltip-bg: rgba(28, 28, 31, 0.96);
  --tooltip-border: rgba(255, 255, 255, 0.1);

  /* Particles — amber smoke on the dark ground */
  --particle-ink: #FFB347;
}

/* ── LIGHT THEME ────────────────────────────────────────────────────────────
   Warm paper ground, black conscious ink, deep amber accent.
   Every surface inverts; particles go BLACK. */
[data-theme="light"],
:root[data-theme="light"] {
  --accent: #C4780A;
  --accent-bright: #C4780A;
  --accent-soft: rgba(196, 120, 10, 0.12);
  --accent-hover: #B84A0C;
  --accent-on: #FFFFFF;
  --gold: #A66408;
  --steel: #2C3E55;
  --steel-bright: #2C3E55;

  --text-primary: #1A1815;
  --text-secondary: #5A5550;
  --text-tertiary: #9A948E;

  --bg: #F5F2EE;
  --bg-elevated: #FFFFFF;
  --bg-sunken: #EAE7E2;
  --ground: #F5F2EE;
  --elevated: #FFFFFF;
  --elevated-2: #EAE7E2;

  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(0, 0, 0, 0.06);
  --hairline: rgba(0, 0, 0, 0.08);
  --hairline-strong: rgba(0, 0, 0, 0.14);
  --line-soft: rgba(0, 0, 0, 0.05);
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);
  --hover-tint: rgba(0, 0, 0, 0.06);
  --btn-bg: rgba(0, 0, 0, 0.04);
  --btn-bg-hover: rgba(0, 0, 0, 0.08);
  --btn-text: #1A1815;
  --btn-border: rgba(0, 0, 0, 0.10);
  --input-bg: rgba(255, 255, 255, 0.75);
  --input-bg-focus: #FFFFFF;
  --placeholder: #9A948E;

  --panel-sheen: rgba(255, 255, 255, 0.95);
  --panel-shade: rgba(238, 236, 231, 0.75);
  --panel-grad-1: rgba(248, 247, 243, 0.92);
  --panel-grad-2: rgba(238, 236, 231, 0.96);
  --panel-border: rgba(0, 0, 0, 0.08);
  --panel-shadow: 0 14px 40px rgba(0, 0, 0, 0.07);
  --panel-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --panel-inset-deep: inset 0 0 24px rgba(255, 255, 255, 0.5);
  --msg-bg: rgba(255, 255, 255, 0.65);
  --msg-border: rgba(0, 0, 0, 0.06);

  --scrim: rgba(30, 26, 22, 0.35);
  --overlay-grad-1: rgba(248, 247, 243, 0.97);
  --overlay-grad-2: rgba(240, 238, 233, 0.98);
  --nav-bg: rgba(246, 245, 242, 0.88);
  --bar-bg: #EAE7E2;
  --scrollbar-thumb: #C9C4BC;
  --tooltip-bg: rgba(255, 255, 255, 0.97);
  --tooltip-border: rgba(0, 0, 0, 0.1);

  /* BLACK particles on the paper ground */
  --particle-ink: #1A1815;
}

/* ── AUTO THEME — follows the OS preference ───────────────────────────────── */
@media (prefers-color-scheme: light) {
  [data-theme="auto"],
  :root[data-theme="auto"] {
    --accent: #C4780A;
    --accent-bright: #C4780A;
    --accent-soft: rgba(196, 120, 10, 0.12);
    --accent-hover: #B84A0C;
    --accent-on: #FFFFFF;
    --gold: #A66408;
    --steel: #2C3E55;
    --steel-bright: #2C3E55;

    --text-primary: #1A1815;
    --text-secondary: #5A5550;
    --text-tertiary: #9A948E;

    --bg: #F5F2EE;
    --bg-elevated: #FFFFFF;
    --bg-sunken: #EAE7E2;
    --ground: #F5F2EE;
    --elevated: #FFFFFF;
    --elevated-2: #EAE7E2;

    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-border: rgba(0, 0, 0, 0.06);
    --hairline: rgba(0, 0, 0, 0.08);
    --hairline-strong: rgba(0, 0, 0, 0.14);
    --line-soft: rgba(0, 0, 0, 0.05);
    --line: rgba(0, 0, 0, 0.08);
    --line-strong: rgba(0, 0, 0, 0.14);
    --hover-tint: rgba(0, 0, 0, 0.06);
    --btn-bg: rgba(0, 0, 0, 0.04);
    --btn-bg-hover: rgba(0, 0, 0, 0.08);
    --btn-text: #1A1815;
    --btn-border: rgba(0, 0, 0, 0.10);
    --input-bg: rgba(255, 255, 255, 0.75);
    --input-bg-focus: #FFFFFF;
    --placeholder: #9A948E;

    --panel-sheen: rgba(255, 255, 255, 0.95);
    --panel-shade: rgba(238, 236, 231, 0.75);
    --panel-grad-1: rgba(248, 247, 243, 0.92);
    --panel-grad-2: rgba(238, 236, 231, 0.96);
    --panel-border: rgba(0, 0, 0, 0.08);
    --panel-shadow: 0 14px 40px rgba(0, 0, 0, 0.07);
    --panel-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --panel-inset-deep: inset 0 0 24px rgba(255, 255, 255, 0.5);
    --msg-bg: rgba(255, 255, 255, 0.65);
    --msg-border: rgba(0, 0, 0, 0.06);

    --scrim: rgba(30, 26, 22, 0.35);
    --overlay-grad-1: rgba(248, 247, 243, 0.97);
    --overlay-grad-2: rgba(240, 238, 233, 0.98);
    --nav-bg: rgba(246, 245, 242, 0.88);
    --bar-bg: #EAE7E2;
    --scrollbar-thumb: #C9C4BC;
    --tooltip-bg: rgba(255, 255, 255, 0.97);
    --tooltip-border: rgba(0, 0, 0, 0.1);

    --particle-ink: #1A1815;
  }
}