/* Design tokens.
 *
 * One accent, one neutral ramp, one radius scale, one type scale. Every value
 * a component uses comes from here, which is what makes a site retheme in one
 * file instead of thirty.
 *
 * Contrast pairs are verified by scripts/check.mjs against WCAG 2.1 AA. If a
 * value below changes, CI recomputes the ratios and fails on a regression, so
 * the palette cannot drift out of compliance quietly.
 */

:root {
  color-scheme: light;

  /* Surfaces and ink. Cobalt on cream: a saturated blue against one warm
     neutral. Deliberately not the beige-and-brass palette every generated
     "artisan brand" site arrives in. */
  --paper:       #fbfaf7;
  --surface:     #ffffff;
  --surface-alt: #f4f2ec;
  --line:        #e1ded4;   /* decorative hairlines, no contrast floor */
  --line-strong: #cbc7ba;   /* heavier dividers, still decorative */
  --control-border: #8a8574; /* input and ghost-button edges, >= 3:1 */

  --ink:    #16181d;
  --ink-2:  #454a55;
  --ink-3:  #646a77;

  --accent:      #1b45c4;
  --accent-hover:#153aa8;
  --accent-ink:  #ffffff;
  --accent-soft: #eaeefb;

  /* Type. A 1.25 scale, tightened at display sizes where loose tracking reads
     as amateur, and a hard 68ch measure on body copy. */
  --font-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --step--1: clamp(0.83rem, 0.81rem + 0.1vw, 0.89rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
  --step-1:  clamp(1.25rem, 1.19rem + 0.3vw, 1.42rem);
  --step-2:  clamp(1.56rem, 1.45rem + 0.55vw, 1.94rem);
  --step-3:  clamp(1.95rem, 1.75rem + 1vw, 2.75rem);
  --step-4:  clamp(2.44rem, 2.05rem + 1.95vw, 4rem);
  --step-5:  clamp(3.05rem, 2.35rem + 3.5vw, 5.5rem);

  --measure: 68ch;
  --tracking-display: -0.025em;
  --tracking-tight:   -0.012em;

  /* Space. A single 4px-derived ramp. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* Shape. One documented rule: interactive elements are pill, containers are
     10px, media is 4px. Mixing radii without a rule is the most visible sign
     that a page was assembled rather than designed. */
  --radius-interactive: 999px;
  --radius-container:   10px;
  --radius-media:       4px;

  --shell: 1160px;
  --shell-narrow: 760px;

  /* Shadows are tinted to the paper hue, never pure black. */
  --shadow-1: 0 1px 2px rgb(32 28 20 / 0.05);
  --shadow-2: 0 12px 32px -12px rgb(32 28 20 / 0.16);

  --focus-ring: 2px solid var(--accent);
  --focus-offset: 3px;
}

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

    --paper:       #101216;
    --surface:     #171a20;
    --surface-alt: #1d2128;
    --line:        #2b3038;
    --line-strong: #3d434e;
    --control-border: #646c7a;

    --ink:    #f3f2ee;
    --ink-2:  #bdc1c9;
    --ink-3:  #949aa5;

    --accent:      #8aa9ff;
    --accent-hover:#a8bfff;
    --accent-ink:  #0b0e14;
    --accent-soft: #1a2030;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 12px 32px -12px rgb(0 0 0 / 0.6);
  }
}

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

  --paper:       #101216;
  --surface:     #171a20;
  --surface-alt: #1d2128;
  --line:        #2b3038;
  --line-strong: #3d434e;
  --control-border: #646c7a;

  --ink:    #f3f2ee;
  --ink-2:  #bdc1c9;
  --ink-3:  #949aa5;

  --accent:      #8aa9ff;
  --accent-hover:#a8bfff;
  --accent-ink:  #0b0e14;
  --accent-soft: #1a2030;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 12px 32px -12px rgb(0 0 0 / 0.6);
}