/* terranimus-loader kit. Do not hand-edit.
   Source: Meet desktop/ui/tokens.css @ ed3f9e9424997401ce5940998303d961459dabc0
   The block below is that file, unchanged. */
/* VENDORED: the colour tokens of the web app, so the splash page is painted in exactly the web app's theme before the server answers.
   Copy of src/styles/tokens.css up to (not including) its Chinese and Japanese type section. test/desktop-shell-buildable.test.mjs fails when the two drift:
   to update, copy the web app's file again and keep the cut. */
/* ── Terranimus design tokens ─────────────────────────────────────────────
 *
 * Palette is pinned. Every colour below is either an authored OKLCH anchor or
 * derived from one with relative colour syntax — nothing is a loose hex that
 * can drift. The accent in particular is load-bearing: drifting it warmer
 * lands on Anthropic's brand orange, which is the one place this company
 * cannot afford to look like it borrowed an identity.
 *
 * oklch() has been Baseline widely available since 2023-05; relative colours
 * since 2024-09. No fallback layer.
 */

:root {
  /* ── Anchors. Change these and nothing else. ── */
  --paper: oklch(0.985 0.008 80);
  --ink: oklch(0.22 0.015 60);
  --clay: oklch(0.62 0.14 45);

  /* ── Derived surfaces ── */
  --paper-sunk: oklch(from var(--paper) calc(l - 0.028) calc(c + 0.004) h);
  --paper-deep: oklch(from var(--paper) calc(l - 0.055) calc(c + 0.006) h);

  /* ── Derived ink ── */
  --ink-soft: oklch(from var(--ink) calc(l + 0.22) c h);
  --ink-faint: oklch(from var(--ink) calc(l + 0.40) calc(c - 0.004) h);
  --rule: color-mix(in oklch, var(--ink) 12%, transparent);
  --rule-strong: color-mix(in oklch, var(--ink) 22%, transparent);

  /* ── Derived accent ──
   * clay-ink is the text-safe accent: same hue, dark enough for body copy on
   * paper. clay-soft is the wash. clay-ring is the halo on the mark. */
  --clay-ink: oklch(from var(--clay) calc(l - 0.22) calc(c - 0.03) h);
  --clay-soft: oklch(from var(--clay) calc(l + 0.30) calc(c * 0.28) h);
  --clay-ring: oklch(from var(--clay) calc(l + 0.18) calc(c * 0.45) h);
  --on-clay: oklch(0.99 0 0);
  /* the clay for a FILLED button that carries --on-clay text: one step darker than --clay in the light theme (5.7:1; the clay itself is 3.7:1, short of the 4.5:1 a 14 px button needs) */
  --clay-fill: oklch(from var(--clay) calc(l - 0.1) c h);

  /* ── Red as TEXT ──
   * The app's red, oklch(0.55 0.19 25), is a fill and a border as much as a text colour. As text it is 5.1:1 on paper in the
   * light theme and 3.5:1 on the dark one, so error lines and a red Delete use this token, which the dark theme lightens. */
  --danger-ink: oklch(0.55 0.19 25);

  /* ── Type ──
   * Newsreader carries an optical-size axis (6..72). Pinning opsz per role
   * is the single cheapest thing that reads as typographic craft: display
   * cut tightens, body cut opens up. Almost nobody does it.
   */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Courier New', monospace;

  /* Fluid scale, clamped at both ends. Ratio ~1.26 at the small end opening
   * to ~1.33 at the large — display grows faster than body, which is what
   * keeps a big headline from dragging the whole page up with it. */
  --t-eyebrow: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --t-small: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --t-body: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --t-lead: clamp(1.125rem, 1.05rem + 0.38vw, 1.3125rem);
  --t-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --t-h1: clamp(2.5rem, 1.85rem + 3.2vw, 4.75rem);
  --t-display: clamp(3rem, 1.9rem + 5.4vw, 7rem);

  /* ── Layout ── */
  --maxw: 71rem; /* 1136px */
  --measure: 40rem; /* prose */
  --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2rem);
  --section-y: clamp(3.5rem, 2.4rem + 4.4vw, 6rem);

  /* ── Motion ──
   * One easing family. `--ease-settle` is deliberately close to linear on the
   * way out: type should settle like print being pressed, not spring. */
  --ease-settle: cubic-bezier(0.16, 0.84, 0.28, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 140ms;
  --dur-base: 320ms;
  --dur-slow: 720ms;

  /* Grain. Baked once into a data-URI and used as a background-image, so the
   * browser rasterises it a single time — a live SVG filter in the render
   * path costs a composite every frame. It is the difference between "warm
   * paper" and "sickly beige". */
  --grain-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  color-scheme: light dark;
}

/* Dark: a fired, unlit version of the same clay — not an inverted page.
 * Anchors only; every derivation above recomputes from them. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: oklch(0.185 0.012 60);
    --ink: oklch(0.94 0.010 80);
    --clay: oklch(0.70 0.13 48);

    --paper-sunk: oklch(from var(--paper) calc(l + 0.035) c h);
    --paper-deep: oklch(from var(--paper) calc(l + 0.07) c h);
    --ink-soft: oklch(from var(--ink) calc(l - 0.17) c h);
    --ink-faint: oklch(from var(--ink) calc(l - 0.34) c h);
    --rule: color-mix(in oklch, var(--ink) 16%, transparent);
    --rule-strong: color-mix(in oklch, var(--ink) 28%, transparent);
    --clay-ink: oklch(from var(--clay) calc(l + 0.12) calc(c - 0.02) h);
    --clay-soft: oklch(from var(--clay) calc(l - 0.36) calc(c * 0.42) h);
    --clay-ring: oklch(from var(--clay) calc(l - 0.28) calc(c * 0.5) h);
    --on-clay: oklch(0.16 0.01 60);
    --clay-fill: var(--clay);
    --danger-ink: oklch(0.72 0.15 25);
  }
}

:root[data-theme='dark'] {
  --paper: oklch(0.185 0.012 60);
  --ink: oklch(0.94 0.010 80);
  --clay: oklch(0.70 0.13 48);

  --paper-sunk: oklch(from var(--paper) calc(l + 0.035) c h);
  --paper-deep: oklch(from var(--paper) calc(l + 0.07) c h);
  --ink-soft: oklch(from var(--ink) calc(l - 0.17) c h);
  --ink-faint: oklch(from var(--ink) calc(l - 0.34) c h);
  --rule: color-mix(in oklch, var(--ink) 16%, transparent);
  --rule-strong: color-mix(in oklch, var(--ink) 28%, transparent);
  --clay-ink: oklch(from var(--clay) calc(l + 0.12) calc(c - 0.02) h);
  --clay-soft: oklch(from var(--clay) calc(l - 0.36) calc(c * 0.42) h);
  --clay-ring: oklch(from var(--clay) calc(l - 0.28) calc(c * 0.5) h);
  --on-clay: oklch(0.16 0.01 60);
  --clay-fill: var(--clay);
  --danger-ink: oklch(0.72 0.15 25);
  color-scheme: dark;
}

/* An explicit choice pins the browser's own controls to it: scroll bars, form fields, the selection colour and the window's overscroll. Without it,
 * `light dark` above lets the system's setting win over the person's, and a light page on a dark system gets a dark scroll bar (and the reverse).
 * 'System' (no data-theme) keeps `light dark`. */
:root[data-theme='light'] {
  color-scheme: light;
}
