/* Design tokens (docs/BUILD-PLAN.md "UI token and theming foundation").
 *
 * Two tiers only:
 *   1. Primitives  — raw scales; app code never references these.
 *   2. Semantic    — intent-named aliases; all other CSS uses ONLY these.
 *
 * Themes/modes remap the semantic tier onto the primitives. Nothing outside
 * this file may declare or depend on a primitive.
 */

/* ---------- Primitives ---------- */

:root {
  /* Neutral ramp, blue-tinted OKLCH */
  --gray-0: oklch(98.5% 0.002 260);
  --gray-1: oklch(96% 0.003 260);
  --gray-2: oklch(91% 0.004 260);
  --gray-3: oklch(83% 0.005 260);
  --gray-4: oklch(64% 0.008 260);
  --gray-5: oklch(46% 0.01 260);
  --gray-6: oklch(35% 0.012 260);
  --gray-7: oklch(26% 0.012 260);
  --gray-8: oklch(18% 0.012 260);
  --gray-9: oklch(13% 0.01 260);

  --white: oklch(100% 0 0);

  /* Accent inputs; derived accent tokens below compose these so that a
   * future accent picker only has to change h/c/l. */
  --accent-h: 245;
  --accent-c: 0.09;
  --accent-l: 47%;
  --accent-shift: -8%; /* hover/active lightness delta; flipped for dark */

  /* Spacing scale (rem per unit policy; 4px-equivalent steps) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 3rem;

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
}

/* ---------- Semantic tokens: light sheet ---------- */

:root {
  color-scheme: light;

  --color-bg: var(--gray-0);
  --color-surface: var(--white);
  --color-surface-muted: var(--gray-1);
  --color-border: var(--gray-3);
  --color-border-muted: var(--gray-2);
  --color-text: var(--gray-8);
  --color-text-muted: var(--gray-5);

  --color-danger-text: oklch(40% 0.15 27);
  --color-danger-bg: oklch(96% 0.02 27);
  --color-danger-border: oklch(66% 0.14 27);
  --color-danger: oklch(50% 0.19 27);
  --color-success: oklch(48% 0.13 150);
  --color-success-text: oklch(35% 0.1 150);
  --color-success-bg: oklch(96% 0.03 150);
  --color-success-border: oklch(66% 0.11 150);
  --color-warning: oklch(52% 0.12 80);
  --color-warning-text: oklch(40% 0.1 80);
  --color-warning-bg: oklch(96% 0.03 85);
  --color-warning-border: oklch(70% 0.11 80);

  --color-focus: var(--color-accent);
}

/* Derived accent variants: composed from the accent inputs with a lightness
 * shift rather than hand-tuned per state. A theme may still override any of
 * these directly. */
:root {
  --color-accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --color-accent-hover: oklch(
    calc(var(--accent-l) + var(--accent-shift)) var(--accent-c) var(--accent-h)
  );
  --color-accent-active: oklch(
    calc(var(--accent-l) + (2 * var(--accent-shift))) var(--accent-c) var(--accent-h)
  );
  --color-accent-text-on: var(--white);
}

/* ---------- Semantic tokens: dark sheet ---------- */

/* Authored twice on purpose: once for an explicit dark preference and once,
 * under prefers-color-scheme, for `system` mode (including no-JS visitors).
 * Keep the two blocks identical. */

[data-mode="dark"] {
  color-scheme: dark;

  --color-bg: var(--gray-9);
  --color-surface: var(--gray-8);
  --color-surface-muted: var(--gray-9);
  --color-border: var(--gray-6);
  --color-border-muted: var(--gray-7);
  --color-text: var(--gray-1);
  --color-text-muted: var(--gray-4);

  --color-danger-text: oklch(80% 0.1 27);
  --color-danger-bg: oklch(26% 0.06 27);
  --color-danger-border: oklch(45% 0.12 27);
  --color-danger: oklch(72% 0.16 27);
  --color-success: oklch(75% 0.13 150);
  --color-success-text: oklch(88% 0.09 150);
  --color-success-bg: oklch(28% 0.05 150);
  --color-success-border: oklch(48% 0.09 150);
  --color-warning: oklch(78% 0.12 80);
  --color-warning-text: oklch(86% 0.1 85);
  --color-warning-bg: oklch(28% 0.05 80);
  --color-warning-border: oklch(50% 0.09 80);

  --accent-shift: 8%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    color-scheme: dark;

    --color-bg: var(--gray-9);
    --color-surface: var(--gray-8);
    --color-surface-muted: var(--gray-9);
    --color-border: var(--gray-6);
    --color-border-muted: var(--gray-7);
    --color-text: var(--gray-1);
    --color-text-muted: var(--gray-4);

    --color-danger-text: oklch(80% 0.1 27);
    --color-danger-bg: oklch(26% 0.06 27);
    --color-danger-border: oklch(45% 0.12 27);
    --color-danger: oklch(72% 0.16 27);
    --color-success: oklch(75% 0.13 150);
    --color-success-text: oklch(88% 0.09 150);
    --color-success-bg: oklch(28% 0.05 150);
    --color-success-border: oklch(48% 0.09 150);
    --color-warning: oklch(78% 0.12 80);
    --color-warning-text: oklch(86% 0.1 85);
    --color-warning-bg: oklch(28% 0.05 80);
    --color-warning-border: oklch(50% 0.09 80);

    --accent-shift: 8%;
  }
}