/* ==========================================================================
   Baron Munchausen — design tokens
   The only file that names a raw value. Every other stylesheet reads from here.
   Written for D-060 (everything public is English only) and DESIGN.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Type — one variable family, two widths of the same face
   Recursive VF, latin subset, axes MONO 0..1 and wght 400..700 (72 KB).
   MONO 0 = proportional prose. MONO 1 = monospaced evidence. Same skeleton.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Baron";
  src: url("fonts/recursive-latin.woff2") format("woff2");
  font-weight: 400 700;
  /* optional, not swap. With swap, a slow connection paints the page in the
     fallback stack and then re-flows every line when Recursive arrives — on a
     throttled phone that was the single largest layout shift on the site
     (0.26 on the hub, which also spends its bandwidth on three data calls).
     With optional the browser keeps the fallback for that load and uses the
     real face from the cache on the next one. The page was always designed to
     be fully readable before the font arrives; this makes that the rule rather
     than a consolation. */
  font-display: optional;
  font-style: normal;
}

:root {
  --font: "Baron", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Baron", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Modular scale, ratio 1.26 from a 17px body (Bringhurst: pick one ratio and
     hold it). Display sizes are fluid between the mobile and desktop bound. */
  --t-xs:      0.75rem;   /* 12 — cell labels, ids */
  --t-sm:      0.875rem;  /* 14 — secondary prose, table cells */
  --t-base:    1.0625rem; /* 17 — body */
  --t-md:      1.3125rem; /* 21 — lead paragraph */
  --t-lg:      1.625rem;  /* 26 — section heading */
  --t-xl:      2.0625rem; /* 33 */
  --t-2xl:     2.625rem;  /* 42 */
  --t-3xl:     3.3125rem; /* 53 */
  --t-display: clamp(2.25rem, 1.35rem + 3.9vw, 4.1875rem); /* 36 → 67 */

  --lh-display: 1.02;
  --lh-head:    1.14;
  --lh-body:    1.62;
  --lh-mono:    1.5;

  --ls-display: -0.028em;
  --ls-head:    -0.012em;
  --ls-body:    0;
  --ls-mono:    -0.005em;

  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;

  --measure: 66ch;      /* body line length */
  --measure-tight: 46ch;/* lead, captions */

  /* ------------------------------------------------------------------------
     2. Space — 4 px base, no value outside the ladder
     ------------------------------------------------------------------------ */
  --s-1:  0.25rem;  /*   4 */
  --s-2:  0.5rem;   /*   8 */
  --s-3:  0.75rem;  /*  12 */
  --s-4:  1rem;     /*  16 */
  --s-6:  1.5rem;   /*  24 */
  --s-8:  2rem;     /*  32 */
  --s-12: 3rem;     /*  48 */
  --s-16: 4rem;     /*  64 */
  --s-24: 6rem;     /*  96 */
  --s-32: 8rem;     /* 128 */

  /* ------------------------------------------------------------------------
     3. Grid — 10 columns, because the product measures in tenths
     A grounded verdict needs 0.80 of the claims; partial needs 0.40. The page
     uses the same two proportions: primary blocks span 8 of 10, secondary 4.
     ------------------------------------------------------------------------ */
  --cols: 10;
  --gutter: var(--s-6);
  --page-max: 70rem;      /* 1120 */
  --page-pad: var(--s-8); /* 32, drops to 20 on small screens */

  /* ------------------------------------------------------------------------
     4. Shape — radius carries meaning
     r-cell is data (a claim, a chip, a meter cell) and stays nearly square.
     r-panel is a container and is allowed to soften.
     ------------------------------------------------------------------------ */
  --r-cell: 2px;
  --r-panel: 10px;
  --border: 1px;

  /* Pixel unit for the three pixel elements. Nothing else uses it. */
  --px-cell: 4px;
  --px-gap: 1px;

  /* ------------------------------------------------------------------------
     5. Motion — three durations, and one of them runs without being asked
     ------------------------------------------------------------------------ */
  --d-hover: 90ms;
  --d-state: 180ms;
  --d-sequence: 900ms;   /* the single page-load verdict sequence */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --steps-meter: 12;     /* the meter fills in whole cells, never smoothly */

  /* ------------------------------------------------------------------------
     6. Colour — dark is the default theme
     Verdict colours are the brand: proven is brass (a seal), unproven is the
     house red, partial is steel. Colour is never the only signal — meter cells
     also differ by fill, and every verdict carries its word.
     ------------------------------------------------------------------------ */
  --bg:        #0c1013;
  --bg-raise:  #12181b;
  --bg-sink:   #090c0e;
  --line:      #1c252a;
  --line-firm: #2b383f;
  --fg:        #e6edeb;
  --fg-mid:    #9aa9af;
  --fg-dim:    #7c8d94;

  --proven:      #e2a93c;
  --proven-weak: #3a2f16;
  --partial:     #7e97a4;
  --partial-weak:#1d272c;
  --unproven:    #e0574f;
  --unproven-weak:#331a19;

  --focus: #9fd0e6;
  --selection: #2b383f;

  color-scheme: dark;
}

/* Light theme — paper, not cream. Same tokens, re-pointed.
   Applied by [data-theme="light"] and by system preference. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:        #edf0f0;
    --bg-raise:  #f7f9f8;
    --bg-sink:   #e3e8e8;
    --line:      #d2dadb;
    --line-firm: #b3bfc1;
    --fg:        #0f1518;
    --fg-mid:    #4c5c63;
    --fg-dim:    #586a71;

    --proven:      #7d5a0e;
    --proven-weak: #f0e4c8;
    --partial:     #476270;
    --partial-weak:#dde5e8;
    --unproven:    #b13a32;
    --unproven-weak:#f5dcda;

    --focus: #1b6b8c;
    --selection: #cfe0e6;

    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg:        #edf0f0;
  --bg-raise:  #f7f9f8;
  --bg-sink:   #e3e8e8;
  --line:      #d2dadb;
  --line-firm: #b3bfc1;
  --fg:        #0f1518;
  --fg-mid:    #4c5c63;
  --fg-dim:    #586a71;

  --proven:      #7d5a0e;
  --proven-weak: #f0e4c8;
  --partial:     #476270;
  --partial-weak:#dde5e8;
  --unproven:    #b13a32;
  --unproven-weak:#f5dcda;

  --focus: #1b6b8c;
  --selection: #cfe0e6;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:        #0c1013;
  --bg-raise:  #12181b;
  --bg-sink:   #090c0e;
  --line:      #1c252a;
  --line-firm: #2b383f;
  --fg:        #e6edeb;
  --fg-mid:    #9aa9af;
  --fg-dim:    #7c8d94;

  --proven:      #e2a93c;
  --proven-weak: #3a2f16;
  --partial:     #7e97a4;
  --partial-weak:#1d272c;
  --unproven:    #e0574f;
  --unproven-weak:#331a19;

  --focus: #9fd0e6;
  --selection: #2b383f;

  color-scheme: dark;
}

@media (max-width: 40rem) {
  :root { --page-pad: 1.25rem; --gutter: var(--s-4); }
}