/* ==========================================================================
   Design tokens
   Single source of truth for colour, type, space, radius, shadow, motion.
   Colours use light-dark() so the palette follows the OS by default and the
   theme toggle only has to flip `color-scheme` on the root element.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Surfaces ------------------------------------------------------- */
  --bg:            light-dark(#ffffff, #0b0e17);
  --bg-alt:        light-dark(#f5f7fa, #111624);
  --surface:       light-dark(#ffffff, #151b2b);
  --surface-sunk:  light-dark(#f0f3f9, #0e1320);
  --border:        light-dark(#dfe3ec, #262e44);
  --border-strong: light-dark(#c5ccdb, #364060);

  /* --- Text ----------------------------------------------------------- */
  --text:  light-dark(#101528, #eaeefb);
  --muted: light-dark(#4f566b, #a2abc4);

  /* --- Brand and status ----------------------------------------------- */
  --brand:      light-dark(#4338ca, #a5b4fc);
  --brand-ink:  light-dark(#ffffff, #0b0e17);
  --brand-soft: light-dark(#eef0fe, #1b2140);
  --brand-line: light-dark(#c9cdfa, #3b428a);

  --ok:      light-dark(#0f766e, #5eead4);
  --ok-soft: light-dark(#e2f6f2, #0f2b2a);
  --warn:    light-dark(#a35a00, #fbbf6e);
  --danger:  light-dark(#b42318, #fca5a5);

  --ring: light-dark(#4338ca, #a5b4fc);

  /* --- Elevation ------------------------------------------------------ */
  --shadow-sm: 0 1px 2px light-dark(rgba(16, 21, 40, .06), rgba(0, 0, 0, .5));
  --shadow-md: 0 1px 2px light-dark(rgba(16, 21, 40, .05), rgba(0, 0, 0, .4)),
               0 12px 30px -14px light-dark(rgba(16, 21, 40, .22), rgba(0, 0, 0, .75));
  --shadow-lg: 0 1px 2px light-dark(rgba(16, 21, 40, .05), rgba(0, 0, 0, .4)),
               0 24px 52px -20px light-dark(rgba(16, 21, 40, .3), rgba(0, 0, 0, .85));

  /* --- Geometry ------------------------------------------------------- */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --maxw: 1140px;

  /* --- Spacing scale (4px base) --------------------------------------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Type ----------------------------------------------------------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --step--1: clamp(.86rem, .83rem + .15vw, .94rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.09rem + .45vw, 1.42rem);
  --step-2:  clamp(1.55rem, 1.35rem + 1vw, 2.1rem);
  --step-3:  clamp(2.05rem, 1.55rem + 2.4vw, 3.3rem);

  /* --- Motion --------------------------------------------------------- */
  --t-fast: 140ms ease;
  --t-base: 240ms ease;
}

/* Explicit user choice from the theme toggle. light-dark() reads these. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }