/*
 * Unveilio design tokens — single source of truth.
 * Brand: Register mark, pitch / chalk / signal red. Components reference these
 * variables, never a raw colour. Signal red is reserved: gap states, destructive
 * actions, and one primary action per view. Never a chart series, never a background.
 */

:root {
  color-scheme: light dark;

  /* ── Brand ── */
  --color-pitch: #0B0B0C;
  --color-chalk: #FAF7F2;
  --color-signal: #D7263D;
  --color-stone: #57534E;

  /* ── Surfaces & text (light) ── */
  --color-bg: #FAF7F2;
  --color-surface: #F3EFE8;
  --color-surface-raised: #FFFFFF;
  --color-text: #0B0B0C;
  --color-text-muted: #57534E;
  --color-text-subtle: #7A756E;
  --color-border: #E2DDD4;
  --color-border-strong: #CFC8BC;

  /* ── Interaction ── */
  --color-accent: #D7263D;
  --color-accent-hover: #B41E32;
  --color-accent-quiet: #FBE9EB;
  --color-focus: #0B0B0C;

  /* ── Semantic status — state only, never decoration ── */
  --color-status-ok: #1F7A4D;
  --color-status-attention: #8A560F;
  --color-status-critical: #D7263D;
  --color-status-neutral: #57534E;

  /* ── Charts ── */
  /* Categorical: one hue per surface, fixed in enum order (Guardrail 3 dimension).
     These are the only surface identifiers — there is no separate surface token family. */
  --chart-1: #3C5A73;  /* slate  · serp_google */
  --chart-2: #6B4C7A;  /* plum   · ai_overview */
  --chart-3: #2F6B62;  /* pine   · chatgpt, and assistants when rolled up */
  --chart-4: #7F5A28;  /* bronze · gemini */
  --chart-5: #454C8C;  /* indigo · claude */
  --chart-6: #55703C;  /* moss   · perplexity */
  --chart-7: #7A4468;  /* mulberry · copilot */
  --chart-other: #A8A29A;   /* grouped tail beyond seven series */
  --chart-control: #A8A29A; /* control/baseline series — always dashed */
  --chart-grid: #E2DDD4;
  --chart-axis: #57534E;

  /* Sequential: one measure, low to high */
  --chart-seq-1: #EEF1F4;
  --chart-seq-2: #C9D5DF;
  --chart-seq-3: #9DB2C4;
  --chart-seq-4: #6F8DA6;
  --chart-seq-5: #48708C;
  --chart-seq-6: #2B5270;

  /* Diverging: movement against a baseline. Never signal red. */
  --chart-div-neg-2: #8A560F;
  --chart-div-neg-1: #C0965A;
  --chart-div-zero:  #DCD7CD;
  --chart-div-pos-1: #79AE8F;
  --chart-div-pos-2: #1F7A4D;

  /* ── Type ── */
  --font-display: 'Roboto Slab', Georgia, serif;
  --font-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 21px;
  --text-xl: 27px;
  --text-2xl: 34px;
  --text-3xl: 44px;
  --text-4xl: 58px;

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

  --tracking-display: -0.02em;
  --tracking-mono: 0.04em;
  --tracking-label: 0.14em;

  /* ── Space (4px base) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ── Radius, border, elevation ── */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgba(11,11,12,.06);
  --shadow-md: 0 2px 8px rgba(11,11,12,.08);

  /* ── Motion ── */
  --ease: cubic-bezier(.2,.6,.3,1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ── Layout ── */
  --tap-target-min: 44px;
  --content-max: 1200px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0B0B0C;
    --color-surface: #141416;
    --color-surface-raised: #1C1C1F;
    --color-text: #FAF7F2;
    --color-text-muted: #A9A49C;
    --color-text-subtle: #857F77;
    --color-border: #2A2A2E;
    --color-border-strong: #3C3C41;

    --color-accent: #F0475C;
    --color-accent-hover: #FF6275;
    --color-accent-quiet: #2A1416;
    --color-focus: #FAF7F2;

    --color-status-ok: #3FAF76;
    --color-status-attention: #D29922;
    --color-status-critical: #F0475C;
    --color-status-neutral: #A9A49C;

    --chart-1: #7FA3C2;
    --chart-2: #B18FC4;
    --chart-3: #63B5A8;
    --chart-4: #C79A5A;
    --chart-5: #8E95D8;
    --chart-6: #96B877;
    --chart-7: #C08FB0;
    --chart-other: #857F77;
    --chart-control: #857F77;
    --chart-grid: #2A2A2E;
    --chart-axis: #A9A49C;

    --chart-seq-1: #1B2630;
    --chart-seq-2: #2B3E4E;
    --chart-seq-3: #3F5A70;
    --chart-seq-4: #5B7C95;
    --chart-seq-5: #7FA3C2;
    --chart-seq-6: #A9C6DC;

    --chart-div-neg-2: #D29922;
    --chart-div-neg-1: #9A7434;
    --chart-div-zero:  #3C3C41;
    --chart-div-pos-1: #2F7E58;
    --chart-div-pos-2: #3FAF76;

  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
}