/* Hallmark · macrostructure: Marquee Hero · tone: broadcast/unflinching/tender · anchor hue: 147 (deep green)
 * Genre: atmospheric · Nav: N5 floating pill · Footer: Ft5 statement
 * Theme: custom — vibe "late-night monitor, living, unflinching"
 *   paper oklch(20.5% 0.050 147) dark green  ·  accent oklch(62% 0.170 30) warm
 *   display Big Shoulders Display · body Schibsted Grotesk · telemetry Azeret Mono
 * Axes vs V1 (light · roman-serif · warm): paper band + display style differ.
 * No serif on this page by request — display is a condensed gothic.
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5
 *
 * ALIVE, BUT NOT WELL — V2 design tokens
 * The page is a patient monitor at 3am. Deep forest field, ivory type, one
 * vital red. No second accent colour: the red has to stay scarce or it stops
 * meaning "this is the living part."
 */

:root {
  /* ── Field: near-black forest green. ─────────────────────────────────────
        ▸ JONATHAN 8.4: "make it more forest green — green is more positive,
        black is always so depressing," referencing #062E03 / British Racing
        Green / Hunter Green.

        The ramp is anchored to his hue (~147°) but the *page* sits a step
        below his swatch and the raised panels land on it. Two reasons:
        #062E03 across a full viewport glows rather than recedes, and it drops
        --color-ivory-faint to 4.10:1 against the page — under the 4.5:1 floor
        this audience needs. At 0.205 the meta type clears it at 6.03:1 and the
        colour still reads unmistakably green, not black. Run `python audit.py`
        before changing any of these four. ─────────────────────────────────── */
  --color-field:        oklch(0.205 0.050 147);  /* the monitor itself */
  --color-field-2:      oklch(0.250 0.055 147);  /* raised panel — his swatch */
  --color-field-3:      oklch(0.295 0.058 147);  /* input / hover */
  --color-field-lift:   oklch(0.340 0.058 149);  /* pressed / active */

  /* The one light panel on the page — Jonathan's letter. His signature is
     black ink on transparent, so it cannot sit on the dark field. */
  --color-paper:        oklch(0.945 0.011 78);
  --color-paper-2:      oklch(0.905 0.013 78);

  /* ── Ink ──────────────────────────────────────────────────────────────────
     Deliberately still warm. A green field with green-tinted type would be one
     note; warm ivory on cool green is the same complementary tension the red
     carries, played quietly. Ratios are measured, not estimated — run
     `python audit.py` after any edit. ─────────────────────────────────────── */
  --color-ivory:        oklch(0.925 0.014 82);   /* primary — 14.2:1 on field */
  --color-ivory-soft:   oklch(0.755 0.014 78);   /* secondary — 8.1:1 */
  /* Lifted from 0.620 with the field: meta type has to clear 4.5:1 on the
     raised panel too, not just on the page. */
  --color-ivory-faint:  oklch(0.675 0.013 76);   /* meta — 5.9:1 (4.6:1 on --field-3) */
  --color-ink:          oklch(0.220 0.012 36);   /* on the paper panel */
  --color-ink-soft:     oklch(0.420 0.012 36);

  /* ── The vital sign. Kept to display text, graphics, borders and the small
        mono labels on purpose: the red stops meaning "this is the living part"
        the moment it is everywhere.

        ▸ Lifted 0.620 → 0.660 when the field went green. The green ramp is
        lighter than the warm black it replaced, and at 0.620 the 13px mono
        role labels fell to 4.50:1 on the page and 4.01:1 on a raised panel —
        both under the floor. At 0.660 they are 5.28:1 and 4.71:1. Same colour
        to look at; the difference is entirely in whether it is readable.
        `node verify_findings.js` is the check that catches this — audit.py
        measures the sRGB fallbacks, and Chrome's oklch gamut mapping lands a
        couple of points away from them. ───────────────────────────────────── */
  --color-pulse:        oklch(0.660 0.170 30);
  --color-pulse-deep:   oklch(0.470 0.145 30);
  --color-pulse-bright: oklch(0.740 0.175 33);
  --color-pulse-wash:   oklch(0.660 0.170 30 / 0.13);

  /* One calm support, for "stable" readouts and the Spanish toggle. */
  --color-slate:        oklch(0.680 0.048 232);

  --color-line:         oklch(0.925 0.014 82 / 0.15);
  --color-line-soft:    oklch(0.925 0.014 82 / 0.07);
  --color-focus:        oklch(0.800 0.140 78);

  /* ECG graph paper */
  --color-grid-fine:    oklch(0.660 0.170 30 / 0.070);
  --color-grid-bold:    oklch(0.660 0.170 30 / 0.135);

  /* ── Type ─────────────────────────────────────────────────────────────────
     No serif anywhere. A flat-sided condensed gothic for display — it echoes
     the octagonal EKG letterforms instead of arguing with them, and its narrow
     width lets headlines run genuinely large. A neutral grotesque underneath.
     The width contrast between the two is what carries the hierarchy. ───── */
  --font-display:   "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-body:      "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-telemetry: "Azeret Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Scale rebuilt around an older audience: patients, caregivers and an AARP
     partnership. 13px is the hard floor for anything functional — nothing on
     this page is allowed below it — and body sits at 18px, not 17px. */
  --text-micro:     0.8125rem;   /* 13px — tracked mono labels. THE FLOOR. */
  --text-xs:        0.875rem;    /* 14px — meta, captions, chips */
  --text-sm:        1rem;        /* 16px — secondary copy, buttons */
  --text-base:      1.125rem;    /* 18px — body */
  --text-lg:        1.375rem;    /* 22px */
  --text-xl:        clamp(1.55rem, 1.35rem + 1vw, 2.05rem);
  --text-2xl:       clamp(2.1rem,  1.65rem + 2.1vw, 3.2rem);
  --text-3xl:       clamp(2.9rem,  2.0rem + 4.2vw, 5.6rem);
  --text-display:   clamp(3.8rem,  2.2rem + 7.4vw, 9.5rem);

  /* ── Space — 4pt scale ────────────────────────────────────────────────── */
  --space-3xs: 4px;  --space-2xs: 8px;  --space-xs: 12px; --space-sm: 16px;
  --space-md: 24px;  --space-lg: 32px;  --space-xl: 48px; --space-2xl: 64px;
  --space-3xl: 96px;
  --space-section: clamp(72px, 9vw, 148px);

  --measure: 68ch;
  --edge: clamp(20px, 5vw, 76px);
  --maxw: 1340px;

  /* Cap on a circular cast portrait. Capped rather than fluid so a lone
     portrait in a half-empty row can't stretch to the full column width. */
  --portrait: 158px;

  --radius-sm: 2px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 999px;
  --rule: 1px solid var(--color-line);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms; --dur-mid: 320ms; --dur-slow: 620ms;

  --shadow-panel: 0 1px 2px oklch(0 0 0 / 0.4), 0 28px 60px -34px oklch(0 0 0 / 0.85);
  --shadow-lift:  0 2px 6px oklch(0 0 0 / 0.45), 0 44px 90px -44px oklch(0 0 0 / 0.95);
}

/* ── sRGB fallback. Older Safari on Mac (the display bug Bogner hit last
      time) does not support oklch() and would render every colour black. ── */
@supports not (color: oklch(0 0 0)) {
  :root {
    --color-field: #051d09;      --color-field-2: #0d2811;
    --color-field-3: #17341b;    --color-field-lift: #214027;
    --color-paper: #efe8da;      --color-paper-2: #e0d7c6;
    --color-ivory: #ede6d9;      --color-ivory-soft: #b4afa6;
    --color-ivory-faint: #9b968e;
    --color-ink: #26201c;        --color-ink-soft: #5c534c;
    --color-pulse: #e76250;      --color-pulse-deep: #a8362e;
    --color-pulse-bright: #fb8371;
    --color-pulse-wash: rgba(231, 98, 80, 0.13);
    --color-slate: #8fa9bb;
    --color-line: rgba(237, 230, 217, 0.15);
    --color-line-soft: rgba(237, 230, 217, 0.07);
    --color-focus: #e0bc72;
    --color-grid-fine: rgba(231, 98, 80, 0.07);
    --color-grid-bold: rgba(231, 98, 80, 0.135);
    --shadow-panel: 0 1px 2px rgba(0,0,0,0.4), 0 28px 60px -34px rgba(0,0,0,0.85);
    --shadow-lift: 0 2px 6px rgba(0,0,0,0.45), 0 44px 90px -44px rgba(0,0,0,0.95);
  }
}