/* =============================================================================
   Offprint — design tokens.

   This is the file to edit for a restyle. Colour, type and spacing live here and
   nowhere else; site.css only ever references these names, so changing a value
   here changes it everywhere and cannot break a layout.

   Themes. A viewer is in one of three states, not two: an explicit choice stamps
   data-theme on the root, and the default "system" setting stamps nothing. So the
   light palette is complete on bare :root, and the dark palette is declared twice
   — once behind prefers-color-scheme (guarded so an explicit light choice wins)
   and once behind [data-theme="dark"] (so the toggle wins the other way). Never
   define a colour only inside one of those blocks.

   The accent and the reference marker were checked with a contrast/CVD validator
   rather than by eye: #3A6EA5 sits inside the OKLCH lightness band (L 0.49),
   clears the chroma floor (C 0.11) and passes 3:1 against the ground. If you
   change them, re-check rather than trusting the swatch.
   ============================================================================= */

:root {
  /* --- ink and paper ---------------------------------------------------- */
  --ground:      #FAFAF8;
  --surface:     #FFFFFF;
  --ink:         #16181C;
  --ink-2:       #3A3F47;
  --muted:       #5C6169;
  --faint:       #8A9098;
  --rule:        #DEDBD4;
  --rule-soft:   #EBE9E3;

  /* --- accent and annotation ------------------------------------------- */
  --accent:      #3A6EA5;
  --accent-soft: #E7EEF6;
  --on-accent:   #FFFFFF;
  /* The human-baseline marker. A second hue on purpose: it is a different kind
     of thing from a measurement, and must not read as another series. */
  --baseline:    #9A6B1F;
  --baseline-soft: #F6EEDE;
  /* A mark that carries no magnitude — a zero bar, an absent value. */
  --neutral-mark: #A9ADB3;

  /* --- the ordinal ramp for outcome distributions -----------------------
     One hue, monotone lightness, strongest outcome darkest. `step-0` is
     deliberately outside the ramp: no agreement is not a weaker agreement. */
  --step-1: #24486E;
  --step-2: #3A6EA5;
  --step-3: #6E97BF;
  --step-4: #A8C0D8;
  --step-0: var(--neutral-mark);
  --hatch:  rgba(0, 0, 0, .28);

  /* --- type ------------------------------------------------------------ */
  --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --size-base:  17px;
  --leading:    1.62;
  --size-title: clamp(30px, 4.4vw, 44px);
  --size-stand: 20px;
  --size-h3:    18px;
  --size-small: 14.5px;
  --size-fine:  13.5px;
  --size-label: 13px;
  --size-micro: 11px;

  /* Uppercase mono labels need air to stay legible. */
  --track-label: .13em;
  --track-wordmark: .14em;

  /* --- measure and rhythm ---------------------------------------------- */
  --measure:      34rem;   /* running prose: ~65 characters */
  --page-max:    1080px;
  --page-pad:     32px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 22px;
  --space-5: 32px;
  --space-6: 52px;

  --radius:      3px;
  --radius-bar:  4px;

  /* --- chart geometry --------------------------------------------------- */
  --label-col:   12rem;   /* the LLM-name gutter in a chart */
  --value-col:  3.6rem;
  --bar-height: 13px;
  --row-height: 30px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #14161A;
    --surface:     #1B1E23;
    --ink:         #EDEAE3;
    --ink-2:       #C6C2BA;
    --muted:       #9A9690;
    --faint:       #736F69;
    --rule:        #33373D;
    --rule-soft:   #262A2F;

    --accent:      #7BA7D4;
    --accent-soft: #1F2A36;
    --on-accent:   #10161D;
    --baseline:    #C99A46;
    --baseline-soft: #241E14;
    --neutral-mark: #5A5F66;

    --step-1: #9EC2E4;
    --step-2: #7BA7D4;
    --step-3: #55789E;
    --step-4: #3A5069;
    --hatch:  rgba(255, 255, 255, .24);
  }
}

:root[data-theme="dark"] {
  --ground:      #14161A;
  --surface:     #1B1E23;
  --ink:         #EDEAE3;
  --ink-2:       #C6C2BA;
  --muted:       #9A9690;
  --faint:       #736F69;
  --rule:        #33373D;
  --rule-soft:   #262A2F;

  --accent:      #7BA7D4;
  --accent-soft: #1F2A36;
  --on-accent:   #10161D;
  --baseline:    #C99A46;
  --baseline-soft: #241E14;
  --neutral-mark: #5A5F66;

  --step-1: #9EC2E4;
  --step-2: #7BA7D4;
  --step-3: #55789E;
  --step-4: #3A5069;
  --hatch:  rgba(255, 255, 255, .24);
}