/* ==========================================================================
   Between Tokens — design tokens
   --------------------------------------------------------------------------
   Every value here comes from one of two sources, and nothing else is allowed
   in:

   1. The colormap. This field reads probability, attention and loss through
      viridis — the perceptually uniform ramp that ships as the default in
      matplotlib. Practitioners already know how to read it: position along
      the ramp means position along a quantity. So it is the site's only
      colour source, and it is never used decoratively — a hue on this page
      means the reader is looking at a value.

   2. The cell. A monospace advance is the one typographic unit that is the
      same width for every glyph, which is what a token slot is. It sets the
      spacing scale, the rule pitch, and the padding inside a token cell.

   Surfaces are the neutral axis of the same ramp: a violet-grey ground, so
   the deep end of the colormap sits on the page rather than on top of it.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ------------------------------------------------------------ colormap ---
     viridis, sampled at six stops. --map-0 is the low end of a quantity,
     --map-5 the high end. Do not reassign these to mean anything else. */
  --map-0: #440154;
  --map-1: #414487;
  --map-2: #2a788e;
  --map-3: #22a884;
  --map-4: #7ad151;
  --map-5: #fde725;

  /* The ramp as a gradient, for sampling a single colour at a position.
     Light mode stops short of --map-5: yellow on a light ground carries no
     signal. Dark mode restores it below. */
  --ramp: linear-gradient(
    90deg,
    var(--map-0) 0%,
    var(--map-1) 26%,
    var(--map-2) 55%,
    var(--map-3) 78%,
    var(--map-4) 100%
  );
  --ramp-len: 60rem; /* sampling width — see .mark in main.css */

  /* ------------------------------------------------------------ surfaces --- */
  --field: #e9e7ef; /* the page */
  --panel: #f7f6fa; /* raised: code, scheduler, swatches */
  --ink: #17141f; /* body text */
  --ink-2: #423c52; /* secondary text, ledes */
  --ink-3: #736c85; /* labels, meta, captions */

  /* -------------------------------------------------------------- signal ---
     Two states only: a link, and a link under the cursor. */
  --link: var(--map-1);
  --link-hot: var(--map-2);

  /* --------------------------------------------------------------- lines ---
     Ink at three strengths, plus the dotted rule that carries the cell
     pitch into every structural threshold. */
  --hair: color-mix(in oklab, var(--ink) 15%, transparent);
  --hair-strong: color-mix(in oklab, var(--ink) 30%, transparent);
  --edge: color-mix(in oklab, var(--ink) 13%, transparent);
  --rule-dotted: repeating-linear-gradient(90deg, var(--hair-strong) 0 2px, transparent 2px 6px);

  /* --------------------------------------------------------------- cells ---
     Token cells alternate two tints, the way every tokenizer viewer in this
     field draws them. The tints are the colormap at low opacity. */
  --tint-a: color-mix(in oklab, var(--map-1) 15%, transparent);
  --tint-b: color-mix(in oklab, var(--map-3) 14%, transparent);
  --tint-hot: color-mix(in oklab, var(--map-2) 32%, transparent);

  /* ---------------------------------------------------------------- type ---
     Two families. Martian Mono for anything mechanical — the wordmark, the
     hero, labels, ordinals, code. Spectral for anything read in sentences. */
  --mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: 'Spectral', 'Iowan Old Style', Charter, Georgia, serif;

  /* A minor-third scale anchored on the reading size. Mono runs wide, but the
     answer to that is line count, not a smaller size — a hero held down to fit
     one line ends up smaller than the page titles it outranks. So the two
     display sizes peak together at 2.75rem; they never appear on the same page.

     Martian Mono also carries less apparent size than the serif at the same
     value, so every mono role — label, meta, ordinal — sits one step above
     where a sans would. */
  --t-hero: clamp(1.5rem, 4.2vw, 2.75rem);
  --t-title: clamp(1.9rem, 4vw, 2.75rem);
  --t-h2: 1.625rem;
  --t-h3: 1.3125rem;
  /* Reading sizes are fluid. A fixed 20px that reads well in a 36rem column
     becomes a wall at 33 characters a line on a phone, so both step down with
     the viewport rather than holding their desktop value. */
  --t-lede: clamp(1.1875rem, 1.1rem + 0.45vw, 1.3125rem);
  --t-body: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --t-small: 1rem;
  --t-meta: 0.8125rem;
  --t-label: 0.75rem;

  /* --------------------------------------------------------------- space ---
     --cell is the unit: the mono advance at label size, 8px. Everything
     vertical is a multiple of it. */
  --cell: 0.5rem;
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.75rem;
  --s-4: 3rem;
  --s-5: 5.5rem;
  --s-6: 9rem;

  /* -------------------------------------------------------------- layout --- */
  --measure: 36rem; /* reading column */
  --shell: 68rem; /* page */
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --rail: 11rem; /* the mono label column beside a band */

  /* --------------------------------------------------------------- marks ---
     Decode strip geometry. */
  --mark-w: 4px;
  --mark-h: 16px;
  --mark-h-current: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --field: #1a1730;
    --panel: #241f3d;
    --ink: #e7e4ef;
    --ink-2: #b0aac0;
    --ink-3: #948db0; /* labels run at 0.75rem — this clears 4.5:1 on the field */

    /* The colormap's own ground is dark, so the full ramp is legible here
       and the deep end needs lifting to stay visible. */
    --map-0: #6a2a86;
    --ramp: linear-gradient(
      90deg,
      var(--map-0) 0%,
      #6f77d6 24%,
      var(--map-2) 48%,
      var(--map-3) 70%,
      var(--map-4) 87%,
      var(--map-5) 100%
    );

    --link: #9fa4e8;
    --link-hot: #58c0c7;

    --hair: color-mix(in oklab, var(--ink) 17%, transparent);
    --hair-strong: color-mix(in oklab, var(--ink) 32%, transparent);
    --edge: color-mix(in oklab, var(--ink) 10%, transparent);

    /* Cells have to sit above the field, not sink into it. On a dark ground a
       15% tint reads as a hole, so the dark tints run roughly twice the light
       ones — the cell is the lit surface here, the page is the shadow. */
    --tint-a: color-mix(in oklab, #9fa4e8 30%, transparent);
    --tint-b: color-mix(in oklab, #58c0c7 34%, transparent);
    --tint-hot: color-mix(in oklab, #58c0c7 58%, transparent);
  }
}