/* ==========================================================================
   mikr.app — design tokens. The only file that names a colour.
   Every other stylesheet consumes these by name; see design.md.

   Theme model — the same three states the shipped docs already use, so one
   stored preference covers the whole site:
     no data-theme attribute  -> follow the operating system (auto, default)
     data-theme="dark"        -> forced dark
     data-theme="light"       -> forced light

   Dark is the base palette on bare :root, because dark is the product's face
   and it is what shows if a media query never matches. Light is redefined
   twice: once under prefers-color-scheme (guarded so a forced dark wins) and
   once under an explicit data-theme="light" (so the switch wins both ways).
   The shipped docs do this the other way round — light base, dark override.
   Same behaviour, opposite default; the switch is identical.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- dark: paper + ink. Perceptual matches of the shipped hex palette --- */
  --paper:         oklch(13% 0.012 265);   /* was #0a0b0f */
  --paper-2:       oklch(17% 0.014 265);   /* was #12141c */
  --paper-3:       oklch(20.5% 0.016 265); /* was #171a24 */
  --paper-blur:    oklch(13% 0.012 265 / 0.72);
  --paper-blur-2:  oklch(13% 0.012 265 / 0.92);
  --ink:           oklch(93% 0.008 265);   /* was #e4e7ef */
  --ink-2:         oklch(68% 0.022 265);   /* was #8b92a8, lifted for 12px mono */
  --ink-3:         oklch(52% 0.024 265);   /* separators, never body text */
  --rule:          oklch(27% 0.018 265);   /* was #252938 */
  --rule-2:        oklch(34% 0.020 265);

  /* --- accent, split by job. Each value is contrast-checked where it is used --- */
  --accent:        oklch(64% 0.185 258);   /* brand mark, links, borders */
  --accent-fill:   oklch(52% 0.170 258);   /* fills that carry text: white on it 6.3:1 */
  --accent-fill-2: oklch(46% 0.155 258);   /* its hover */
  --accent-lift:   oklch(76% 0.140 255);   /* accent as SMALL text on paper-2 */
  --accent-ink:    oklch(98% 0.005 258);
  --accent-soft:   oklch(64% 0.185 258 / 0.14);

  /* --- status. Meaning only, never decoration --- */
  --ok:            oklch(74% 0.170 150);
  --warn:          oklch(79% 0.150 72);
  --danger:        oklch(70% 0.180 25);
  --focus:         oklch(82% 0.130 250);

  /* --- a capture now comes in the reader's own theme (see js/shots.js), so
         this is a frame, not a mat: a step away from the page so the figure
         has an edge. It was a dark mat while every capture was dark. --- */
  /* --- interaction grounds. A surface token was doing this job, and it is
         tuned for panels, not for pointer feedback: paper -> paper-2 is +4.0
         points of lightness in dark but only -2.0 in light, so a hover that
         reads in dark all but disappears on near-white paper. These two move
         by a comparable amount in both themes. --- */
  --hover:         oklch(18% 0.015 265);
  --active:        oklch(22% 0.016 265);

  --shot-mat:      var(--paper-2);
  --shot-pad:      0.375rem;

  /* --- The architecture drawing. A node sits one step above the mat it is
         drawn on, which is a different direction in each theme: darker paper
         is the step up in the dark, lighter paper in the light. --- */
  --dg-node:       var(--paper-3);
  --dg-node-key:   var(--paper);

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* 4-point scale. Nothing in this project sets a spacing value off it. */
  --space-3xs: 0.25rem; --space-2xs: 0.5rem;  --space-xs: 0.75rem;
  --space-sm:  1rem;    --space-md:  1.5rem;  --space-lg: 2rem;
  --space-xl:  3rem;    --space-2xl: 4.5rem;  --space-3xl: 7rem;

  --text-xs: 0.75rem;   --text-sm: 0.8125rem; --text-base: 0.9375rem;
  --text-md: 1.0625rem; --text-lg: 1.25rem;   --text-xl: 1.625rem;
  --text-2xl: 2rem;     --text-3xl: 2.5rem;
  --text-display: clamp(2.5rem, 2.1rem + 2.6vw, 4.25rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-short: 180ms;
  --dur-mid: 260ms;

  --tap: 2.75rem;         /* 44px touch target */
  --bullet-top: 0.62em;   /* optical: aligns a 5px square to x-height */

  --radius-card: 10px;
  --radius-control: 8px;
  --radius-pill: 999px;

  --wrap: 1320px;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --nav-h: 4.25rem;       /* the fixed nav's height: what every sticky offsets by */
}

:root[data-theme="dark"] { color-scheme: dark; }

/* --- light. Aligned to the palette the shipped docs already read as light,
       with every pair re-checked: accent moves DOWN in lightness here, because
       the same blue that passes on near-black fails on near-white. --- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --paper:         oklch(99.4% 0.002 265);
    --paper-2:       oklch(97.4% 0.004 265);
    --paper-3:       oklch(95% 0.006 265);
    --paper-blur:    oklch(99.4% 0.002 265 / 0.78);
    --paper-blur-2:  oklch(99.4% 0.002 265 / 0.94);
    --ink:           oklch(23% 0.020 265);
    --ink-2:         oklch(45% 0.026 265);
    --ink-3:         oklch(58% 0.024 265);
    --rule:          oklch(91% 0.008 265);
    --rule-2:        oklch(84% 0.012 265);

    --accent:        oklch(50% 0.200 258);
    --accent-fill:   oklch(50% 0.200 258);
    --accent-fill-2: oklch(44% 0.185 258);
    --accent-lift:   oklch(45% 0.190 258);
    --accent-ink:    oklch(99% 0.002 258);
    --accent-soft:   oklch(50% 0.200 258 / 0.10);

    --ok:            oklch(52% 0.150 150);
    --warn:          oklch(55% 0.130 62);
    --danger:        oklch(52% 0.190 25);
    --focus:         oklch(45% 0.200 255);

    --hover:         oklch(95% 0.006 265);
    --active:        oklch(91.5% 0.008 265);

    --shot-mat:      oklch(95% 0.006 265);
    --shot-pad:      0.375rem;

    --dg-node:       var(--paper);
    --dg-node-key:   var(--paper);
  }
}

:root[data-theme="light"] {
  color-scheme: light;

  --paper:         oklch(99.4% 0.002 265);
  --paper-2:       oklch(97.4% 0.004 265);
  --paper-3:       oklch(95% 0.006 265);
  --paper-blur:    oklch(99.4% 0.002 265 / 0.78);
  --paper-blur-2:  oklch(99.4% 0.002 265 / 0.94);
  --ink:           oklch(23% 0.020 265);
  --ink-2:         oklch(45% 0.026 265);
  --ink-3:         oklch(58% 0.024 265);
  --rule:          oklch(91% 0.008 265);
  --rule-2:        oklch(84% 0.012 265);

  --accent:        oklch(50% 0.200 258);
  --accent-fill:   oklch(50% 0.200 258);
  --accent-fill-2: oklch(44% 0.185 258);
  --accent-lift:   oklch(45% 0.190 258);
  --accent-ink:    oklch(99% 0.002 258);
  --accent-soft:   oklch(50% 0.200 258 / 0.10);

  --ok:            oklch(52% 0.150 150);
  --warn:          oklch(55% 0.130 62);
  --danger:        oklch(52% 0.190 25);
  --focus:         oklch(45% 0.200 255);

  --hover:         oklch(95% 0.006 265);
  --active:        oklch(91.5% 0.008 265);

  --shot-mat:      oklch(95% 0.006 265);
  --shot-pad:      0.375rem;

  --dg-node:       var(--paper);
  --dg-node-key:   var(--paper);
}