/*
 * Load — the site
 *
 * The token layer only: custom properties, the dark scheme, and the base
 * reset. Ported by hand from the shared Kotlin source:
 *
 *   ../clients/shared/src/commonMain/kotlin/com/charithp/load/design/LoadTokens.kt
 *
 * That file is the single source of truth for both apps, and CSS is a consumer
 * it cannot reach. So these values are duplicated and can drift: **change a
 * token there and change it here in the same commit.** Reasoning for individual
 * values lives in load/DESIGN.md and in the Kotlin, not here.
 *
 * Only the roles this site draws are carried over. The set-row verdict colours,
 * the chart constants and the motion springs have no use on four pages of text.
 */

:root {
  color-scheme: light;

  /* --- Surfaces and ink (E · Blueprint, 2026-09-16) ----------------------
     The page is white and cards step down onto it in cold slate. */
  --load-surface: #ffffff;
  --load-surface-raised: #e9eef6;
  --load-surface-sunken: #dae2ee;
  --load-border: #beccdf;
  --load-ink: #0b1b2e;
  --load-ink-muted: #4f6076;

  /* The only warm colour, and therefore the only thing that reads as action.
     6.33:1 on the page, 5.44 on a card, 4.86 on sunken. */
  --load-accent: #a83c09;
  --load-accent-pressed: #8f3308;
  --load-accent-wash: #fae6da;
  --load-on-accent: #ffffff;

  /* Destructive actions only. Never on a paragraph. */
  --load-critical: #bb1515;

  /* What costs money. Drawn on `raised`, as in the app. */
  --load-premium: #6b4a96;

  /* --- Type ---------------------------------------------------------------
     **System fonts for prose, one display face for headings and the
     wordmark** — the apps' own split. Barlow Semi Condensed, loaded from
     Google Fonts at 600–800; the apps bundle 500–800 and nothing here draws
     at 500. */
  --load-font-display: "Barlow Semi Condensed", ui-sans-serif, system-ui, sans-serif;
  --load-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --load-heading-l: 700 24px/30px var(--load-font-display);
  --load-heading-m: 700 20px/24px var(--load-font-display);
  --load-heading-s: 700 17px/22px var(--load-font-display);
  --load-body-l: 400 16px/24px var(--load-font-body);
  --load-body-m: 400 15px/23px var(--load-font-body);
  --load-body-s: 400 13px/18px var(--load-font-body);
  --load-caption: 600 12px/16px var(--load-font-body);

  /* --- Space, on a 4px grid. These are the only spacing values. ---------- */
  --load-space-xxs: 4px;
  --load-space-xs: 8px;
  --load-space-s: 12px;
  --load-space-m: 16px;
  --load-space-l: 20px;
  --load-space-xl: 24px;
  --load-space-xxl: 32px;
  --load-space-xxxl: 40px;
  --load-space-huge: 48px;
  --load-space-massive: 64px;

  /* --- Shape. 12 for a card, against Tare's 16: machined, not soft. ------ */
  --load-radius-field: 12px;
  --load-radius-card: 12px;
  --load-radius-large: 20px;
}

/* **The whole dark theme, not a partial fallback.** This site ships no
   JavaScript, so the media query *is* the dark theme — Tare's site measured a
   heading at 1.08:1 in dark when its copy of this block was incomplete. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Navy, not neutral: the dark page carries the light cards' hue. */
    --load-surface: #0a1624;
    --load-surface-raised: #132234;
    --load-surface-sunken: #050d16;
    --load-border: #24384f;
    --load-ink: #e8f0f8;
    --load-ink-muted: #93a7bc;

    /* Lighter than light mode's: 7.77:1 on the dark page. */
    --load-accent: #ff8a3d;
    --load-accent-pressed: #ffa566;
    --load-accent-wash: #33200f;
    --load-on-accent: #1a0a00;

    --load-critical: #ff6d7c;
    --load-premium: #c2a4ee;
  }
}

/* --- Base ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--load-surface);
  color: var(--load-ink);
  font: var(--load-body-l);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

a {
  color: var(--load-accent);
}