/* ==========================================================================
   tokens.css - the only file that defines a value. Everything else uses them.

   Palette rules that are NOT negotiable (measured with tools/contrast.py):
     1. violet-solid #7a4bd6 is 2.80:1 on --bg-well. It is a FILL only, and only
        under white text. Violet TEXT on dark is --violet #a684e8 (5.98:1).
     2. clay-solid #e8554d is 4.29:1 on --bg-well - AA-large only. Body-size
        brand text on dark is --clay #f07a70 (5.68:1).
     3. Gold #ffd23f carries DARK text (13.09:1). White on gold is 1.44:1. Never.
   Re-run `python3 tools/contrast.py` after touching any colour below.

   Semantics, so the palette reads as an argument and not as decoration:
     clay   = the problem (bloat, Electron, "them"). Never a RayClay affordance.
     gold   = RayClay itself, and the primary call to action.
     teal + violet = the motley: the two halves of any split, and data series.
   A warning or an error uses --fg-strong on --bg-well with an icon. Not a colour.
   ========================================================================== */

@font-face {
  font-family: Rubik;
  src: url(../fonts/rubik-var-latin.woff2) format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Light palette - the full set lives here on bare :root so no colour is ever
   defined only inside a media query.
   -------------------------------------------------------------------------- */
:root {
  --bg: #faf6f0;
  --bg-raised: #f2ebe1;
  --bg-well: #e6dccf;
  --border: #d9cbb9;
  --border-strong: #bda88f;

  --fg: #2a2320;
  --fg-strong: #14100f;
  --fg-muted: #5c4f48;
  /* Darkened from #6e6058 on 2026-08-27. It read 4.46:1 on --bg-well, which is
     AA-large only, and body-size text does sit on a well: enumerating every text
     element on all eight pages finds exactly one such pair, the .tbl-meta caption on
     /compare at 13px. Darkened so the PAIR cannot fail rather than carving out that
     one selector. (This claimed the pair also occurs in every .note and every
     .section-band. Measured, it occurs in neither.) */
  --fg-dim: #6a5c54;

  --clay: #a12f2b;        /* text */
  --clay-solid: #c43d38;  /* fills */
  --gold: #8a6a00;        /* text, and any gold GRAPHIC - see .ladder-rc */
  --gold-solid: #ffd23f;  /* fills, always with --on-accent text */
  /* Darkened from #1a6f66 on 2026-08-27, same reason: 4.42:1 on --bg-well. ONE
     cross-reference chip on /docs/cheatsheet renders exactly there; the other 80 sit
     on --bg-raised at 5.34:1 and were never the failing pair.

     --gold is a worse pair on the same surface (3.74:1 on --bg-well) and is NOT
     cleared for it. It is declared for text and for gold graphics, and today its only
     text use is .num-rayclay on --bg at 4.71:1. Do not put gold text on a well. */
  --teal: #196b62;
  --teal-solid: #2bb3a3;
  --violet: #5a32a8;
  --violet-solid: #7a4bd6;

  --on-accent: #14100f;   /* text on a gold or teal fill */
  --on-violet: #ffffff;   /* text on a violet fill */

  /* ---- type -------------------------------------------------------------- */
  --font-sans: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --step--1: .8125rem;
  --step-0: 1rem;
  --step-1: 1.0625rem;
  --step-2: clamp(1.25rem, 1.10rem + 0.70vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.25rem + 1.20vw, 2rem);
  --step-4: clamp(1.95rem, 1.50rem + 2.20vw, 2.9rem);
  --step-5: clamp(2.5rem, 1.70rem + 3.80vw, 4.5rem);

  --lh-body: 1.6;
  --lh-head: 1.15;
  --lh-display: 1.05;

  --track-display: -0.035em;
  --track-head: -0.025em;
  --track-sub: -0.015em;
  --track-ui: 0.01em;
  --track-eyebrow: 0.08em;

  /* ---- space, 4px base --------------------------------------------------- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ---- radius - RayClay's own Tailwind-shaped scale ----------------------
     SQUARED ON 2026-08-27, on the owner's instruction: "reduce corner radius,
     keep rounded corners but more square, consistent site wide". Every step
     came down (4/6/8/12/16 -> 3/4/6/8/10) rather than a handful of selectors
     being patched, because the complaint was about the site's shape and not
     about one component - and because a scale is the only place a shape can be
     changed once.

     --r-full survives for one element: the cheatsheet rail's scrollbar thumb,
     which is 4px of content box wide and has no corner a reader could call
     square or round. Every CONTROL that used to be a pill - the /compare
     machine and scale chips, the narrow-screen disclosure, the rank label and
     the cheatsheet's cross-reference badges - now takes a scale value, so
     nothing on the site is stadium-shaped by default. */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-xl: 8px;
  --r-2xl: 10px;
  --r-full: 9999px;

  /* ---- motion ------------------------------------------------------------ */
  --dur-fast: 150ms;
  --dur: 220ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* ---- focus -------------------------------------------------------------- */
  /* base.css applies this to :focus-visible; compare.css restates it on a sibling
     because its radio input is opacity: 0, which hides its own outline. Two sites,
     one value, so retuning here reaches the chips on /compare too. */
  --focus-ring: 2px solid var(--gold);
  --focus-offset: 2px;

  /* ---- elevation ---------------------------------------------------------- */
  /* The only shadow on the site: /compare's controls panel, which overlays the
     charts rather than pushing them, so this is the depth cue and not decoration.
     Dark gets a deeper, wider value because panel and page are closer in luminance
     there. It was a hard-coded rgb() in compare.css, tuned for light only. */
  --shadow-panel: 0 12px 24px -12px rgb(0 0 0 / .35);

  /* ---- layout ------------------------------------------------------------ */
  --wrap: 74rem;
  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --header-h: 3.75rem;
  --tap: 44px; /* minimum touch target */
}

/* --------------------------------------------------------------------------
   Dark palette. Only what changes is redefined, twice: once for the system
   preference (unless the reader has explicitly chosen light) and once for the
   explicit toggle, so the toggle wins in both directions.

   BOTH ARE SCOPED TO `screen`, and that is the whole print stylesheet. Browsers
   print text colour but suppress backgrounds, so a dark-theme reader printing any
   page got #efe6d6 ink on white paper. Scoping these two blocks leaves bare :root
   supplying the light values on paper: no print-only colour to keep in step.
   -------------------------------------------------------------------------- */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14100f;
    --bg-raised: #1d1715;
    --bg-well: #2a2320;
    --border: #3a312d;
    --border-strong: #4d423c;

    --fg: #efe6d6;
    --fg-strong: #faf5ec;
    --fg-muted: #b8ab99;
    --fg-dim: #9c8e7c;

    --clay: #f07a70;
    --clay-solid: #e8554d;
    --gold: #ffd23f;
    --gold-solid: #ffd23f;
    --teal: #4fd0bf;
    --teal-solid: #2bb3a3;
    --violet: #a684e8;
    --violet-solid: #7a4bd6;

    --on-accent: #14100f;
    --on-violet: #ffffff;

    --shadow-panel: 0 16px 32px -12px rgb(0 0 0 / .7);
  }
}

/* The explicit toggle, scoped to screen for the reason above. */
@media screen {
  :root[data-theme="dark"] {
    --bg: #14100f;
    --bg-raised: #1d1715;
    --bg-well: #2a2320;
    --border: #3a312d;
    --border-strong: #4d423c;

    --fg: #efe6d6;
    --fg-strong: #faf5ec;
    --fg-muted: #b8ab99;
    --fg-dim: #9c8e7c;

    --clay: #f07a70;
    --clay-solid: #e8554d;
    --gold: #ffd23f;
    --gold-solid: #ffd23f;
    --teal: #4fd0bf;
    --teal-solid: #2bb3a3;
    --violet: #a684e8;
    --violet-solid: #7a4bd6;

    --on-accent: #14100f;
    --on-violet: #ffffff;

    --shadow-panel: 0 16px 32px -12px rgb(0 0 0 / .7);
  }
}