/* Hallmark · genre: atmospheric · macrostructure: Terrace Marquee · theme: lumen (night foundry, brand-accent override) · enrichment: Tier-B live-proposal mock + agent-event chips · nav: N5 · footer: Ft5 · design-system: design.md · designed-as-app */

:root {
  color-scheme: dark;

  /* Canvas — Lumen Night Foundry. The Day Foundry pair inverted: the same cool
     violet pull at hue 265, with paper and ink trading places. A near-black
     that belongs to this system rather than a borrowed one. */
  --color-paper:      oklch(19% 0.014 265);
  --color-paper-2:    oklch(23% 0.014 265);
  --color-paper-3:    oklch(27% 0.014 265);
  /* Emission on a dark canvas is light leaking in, not shadow falling out. */
  --color-paper-emit: oklch(62% 0.14 152 / 0.10);

  /* Ink */
  --color-ink:    oklch(97% 0.008 265);   /* 17.2:1 on paper */
  --color-ink-2:  oklch(86% 0.010 265);   /* 12.3:1 */
  --color-muted:  oklch(72% 0.012 265);   /*  7.6:1 */

  /* Rule / hairline */
  --color-rule:   oklch(34% 0.012 265);
  --color-rule-2: oklch(44% 0.014 265);
  --rule-blueprint: oklch(97% 0.008 265 / 0.045);

  /* Accent — not a new green. These are bit-identical to the dark-mode variants
     ios/Purchasa/Theme.swift already ships: oklch(62% 0.14 152) IS #329D5A is
     Brand.green(dark), and oklch(69% 0.15 65) IS #D98514 is Brand.amber(dark).
     The web moved to meet iOS, not the other way round.

     `accent-ink` is near-black because on this fill near-black scores 5.40:1
     and white scores only 3.42:1 — which is also why the wordmark tile keeps
     the DEEP green below, where its white "p" (and the cursor art baked from
     it) still scores 4.72:1. */
  --color-accent:      oklch(62% 0.14 152);   /* #329D5A · 5.40:1 · Brand.green(dark) */
  --color-accent-deep: oklch(54% 0.14 152);   /* #078543 · Brand.green(light) · white-safe */
  --color-accent-ink:  oklch(19% 0.014 265);  /* 5.40:1 on the fill */

  /* The app icon, as a token. Every "p" tile on the site — nav, footer, link
     preview, cursor art, favicon — is this exact field with a white Pacifico
     "p" on it, so the home-screen icon and the site are one object. The values
     are the ones ios/README.md composites the 1024 icon from; white measures
     5.6:1 on the darker end. */
  --brand-tile-from: #2c8f5c;
  --brand-tile-to:   #186b41;
  --brand-tile: radial-gradient(circle at 50% 50%, var(--brand-tile-from), var(--brand-tile-to));

  /* Tare's kraft. Not accents — they never carry state or meaning, they are
     just what cardboard is, and nothing else on the site uses them. Measured
     against --color-paper: kraft 6.47:1, lit 8.05:1, tape 12.31:1, so the
     figure clears text contrast even though it is decorative. The two darker
     values (3.67:1 and 3.09:1) are limbs and seams, which are read against
     kraft, not against the canvas. */
  --mascot-kraft:       #C0913F;
  --mascot-kraft-lit:   #D2A451;
  --mascot-kraft-lit-2: #C59742;
  --mascot-kraft-2:     #8A6A2E;
  --mascot-kraft-3:     #7C5F28;
  --mascot-tape:        #E3D2A4;
  --mascot-tape-2:      #C9B584;
  --color-accent-2:    oklch(69% 0.15 65);    /* #D98514 · 6.42:1 · Brand.amber(dark) */
  --color-glow:        oklch(62% 0.14 152 / 0.30);
  --color-focus:       oklch(62% 0.14 152);
  --color-error:       oklch(68% 0.194 24);   /* #F95B5A · Brand.danger(dark) */

  /* Translucent surfaces — light lifted off the canvas, the dark-theme
     equivalent of a tinted card. */
  --surface-1: oklch(97% 0.008 265 / 0.05);
  --surface-2: oklch(97% 0.008 265 / 0.09);

  /* Type */
  --font-display: "Archivo", "Archivo Expanded", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-label:   "JetBrains Mono", ui-monospace, monospace;
  --font-brand:   "Pacifico", "Brush Script MT", "Segoe Script", cursive; /* the "purchasa" wordmark only */

  /* Display axes — Archivo is variable on wdth 62..125 and wght 100..900. */
  --wdth-display: 125;
  --wght-display: 800;
  --leading-display: 0.88;

  /* Space — 4pt scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* Type scale — 1.25 ratio */
  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  2.9rem;
  /* Display runs on viewport width the way the reference does, so the headline
     fills the measure at every size instead of stepping. */
  /* Sized so the longest line ("You decide." at ~8.2em) fits the container at
     every width instead of silently wrapping mid-headline. */
  --text-display:   clamp(2.25rem, 8.4vw, 8rem);
  --text-display-s: clamp(1.9rem, 6.6vw, 6.25rem);

  /* 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-micro:   120ms;
  --dur-short:   220ms;
  --dur-long:    420ms;
  --dur-reveal:  320ms;
  --dur-marquee: 38s;

  /* Radii — the CTA voice is a pill now; cards stay technical. iOS keeps
     `Brand.controlRadius` at 10 and does not follow the web into pills. */
  --radius-card:  14px;
  --radius-btn:   10px;
  --radius-input: 10px;
  --radius-pill:  999px;
  --radius-cta:   4rem;

  /* Elevation — on a dark canvas depth comes from a lifted surface and a light
     hairline, not a dropped shadow. Tokens keep their names so no selector
     breaks; only what they draw has changed. */
  --shadow-1: 0 1px 0 0 oklch(97% 0.008 265 / 0.06) inset, 0 12px 28px -20px oklch(0% 0 0 / 0.8);
  --shadow-2: 0 1px 0 0 oklch(97% 0.008 265 / 0.08) inset, 0 16px 34px -22px oklch(0% 0 0 / 0.9);
  --shadow-lift: 0 1px 0 0 oklch(97% 0.008 265 / 0.10) inset, 0 18px 34px -24px oklch(0% 0 0 / 0.85);
  --shadow-sheet: 0 1px 0 0 oklch(97% 0.008 265 / 0.08) inset, 0 20px 40px -20px oklch(0% 0 0 / 0.9);

  /* Z-scale */
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500;
}