/* ==========================================================================
   DESIGN TOKENS: the only file in this repo allowed to hold raw values.

   Layer 1  KNOBS      change these to re-skin the whole project
   Layer 2  SCALES     derived from the knobs, never used directly in UI
   Layer 3  SEMANTIC   what components use (bg, surface, fg, accent...)

   Tailwind is mapped onto layer 3 in src/app/globals.css, and its default
   palette is switched off, so classes like bg-blue-500 do not exist.
   Design-exploration pages in /admin load this same file.
   ========================================================================== */

:root {
  /* ---- 1. KNOBS --------------------------------------------------------- */
  --hue-brand: 47;           /* accent hue, 0-360 */
  --chroma-brand: 0.18;      /* accent saturation, 0-0.3 */
  --hue-neutral: 90;         /* tint of the greys */
  --chroma-neutral: 0.018;   /* 0 = pure grey */
  --radius-base: 7px;        /* every radius derives from this */
  --space: 0.25rem;          /* spacing unit: p-4 = 4 x --space (density knob) */
  --type-ratio: 1.25;        /* type scale ratio */
  --font-body: "Commissioner Variable", ui-sans-serif, system-ui, sans-serif;
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- 2. SCALES -------------------------------------------------------- */
  --n-0:   oklch(99.5% var(--chroma-neutral) var(--hue-neutral));
  --n-50:  oklch(97%   var(--chroma-neutral) var(--hue-neutral));
  --n-100: oklch(94%   var(--chroma-neutral) var(--hue-neutral));
  --n-200: oklch(89%   var(--chroma-neutral) var(--hue-neutral));
  --n-300: oklch(81%   var(--chroma-neutral) var(--hue-neutral));
  --n-600: oklch(50%   var(--chroma-neutral) var(--hue-neutral));
  --n-700: oklch(41%   var(--chroma-neutral) var(--hue-neutral));
  --n-900: oklch(23%   var(--chroma-neutral) var(--hue-neutral));
  --n-950: oklch(17%   var(--chroma-neutral) var(--hue-neutral));

  --size-base: 1rem;
  --size-sm:   calc(var(--size-base) / var(--type-ratio));
  --size-xs:   calc(var(--size-sm) / var(--type-ratio));
  --size-lg:   calc(var(--size-base) * var(--type-ratio));
  --size-xl:   calc(var(--size-lg) * var(--type-ratio));
  --size-2xl:  calc(var(--size-xl) * var(--type-ratio));
  --size-3xl:  calc(var(--size-2xl) * var(--type-ratio));

  --r-sm:   calc(var(--radius-base) * 0.5);
  --r-md:   var(--radius-base);
  --r-lg:   calc(var(--radius-base) * 1.75);
  --r-full: 9999px;

  /* Page-type colours: shared lightness and chroma, different hues */
  --type-l: 63%;
  --type-c: 0.14;

  /* ---- 3. SEMANTIC (light) --------------------------------------------- */
  --bg:             var(--n-50);
  --surface:        var(--n-0);
  --surface-sunken: var(--n-100);
  --fg:             var(--n-950);
  --fg-muted:       var(--n-700);
  --border:         var(--n-200);
  --border-strong:  var(--n-300);
  --accent:         oklch(52% var(--chroma-brand) var(--hue-brand));
  --accent-hover:   oklch(46% var(--chroma-brand) var(--hue-brand));
  --accent-fg:      var(--n-0);
  --danger:         oklch(54% 0.19 27);
  --danger-fg:      var(--n-0);
  --focus:          oklch(60% 0.2 var(--hue-brand));
  --elev-1: 0 1px 0 color-mix(in oklch, var(--fg) 5%, transparent),
            0 8px 24px -12px color-mix(in oklch, var(--fg) 22%, transparent);

  --type-brief:    oklch(var(--type-l) var(--type-c) var(--hue-brand));
  --type-design:   oklch(var(--type-l) var(--type-c) 340);
  --type-idea:     oklch(var(--type-l) var(--type-c) 75);
  --type-feature:  oklch(var(--type-l) var(--type-c) 210);
  --type-research: oklch(var(--type-l) var(--type-c) 150);
  --type-decision: oklch(var(--type-l) var(--type-c) 30);
}

/* ---- 3. SEMANTIC (dark): only the semantic layer changes ---------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:             oklch(16% var(--chroma-neutral) var(--hue-neutral));
    --surface:        oklch(20% var(--chroma-neutral) var(--hue-neutral));
    --surface-sunken: oklch(13% var(--chroma-neutral) var(--hue-neutral));
    --fg:             oklch(95% var(--chroma-neutral) var(--hue-neutral));
    --fg-muted:       oklch(72% var(--chroma-neutral) var(--hue-neutral));
    --border:         oklch(29% var(--chroma-neutral) var(--hue-neutral));
    --border-strong:  oklch(37% var(--chroma-neutral) var(--hue-neutral));
    --accent:         oklch(72% var(--chroma-brand) var(--hue-brand));
    --accent-hover:   oklch(78% var(--chroma-brand) var(--hue-brand));
    --accent-fg:      oklch(16% var(--chroma-neutral) var(--hue-neutral));
    --danger:         oklch(68% 0.17 27);
    --danger-fg:      oklch(16% var(--chroma-neutral) var(--hue-neutral));
    --type-l: 72%;
  }
}