/* ==========================================================================
   OrderPulse — design tokens

   Editorial system: a warm paper canvas with near-black "rooms" cut into it.
   Three rules hold the whole page together:
     1. no shadows — separation comes from flat fills and ink strokes;
     2. scale carries the voice — display type is a light serif, never bold;
     3. one accent per job — periwinkle acts, pine confirms, amber signals.
   ========================================================================== */

:root {
  /* ---- Paper side -------------------------------------------------------- */
  --paper: #f6f2e6;
  --paper-raised: #fffdf5;
  --paper-sunk: #eee9d9;

  /* ---- Ink side ---------------------------------------------------------- */
  --ink: #17170f;
  --ink-room: #14140e;
  --ink-raised: #1f1f16;
  --ink-sunk: #100f0a;

  /* ---- Text ---------------------------------------------------------------
     Every level clears 4.5:1 against its own background, including "fog":
     it is the quiet half of a headline, not decoration. */
  --on-paper: #17170f;
  --on-paper-mute: #3d3b2e;
  --on-paper-fog: #534f3e;

  --on-ink: #f6f2e6;
  --on-ink-mute: #d8d3c2;
  --on-ink-fog: #c4bfae;

  /* ---- Accents ----------------------------------------------------------- */
  --periwinkle: #d7dcff;
  --periwinkle-deep: #b9c1ff;
  --pine: #12483c;
  --pine-tint: #d9e8e0;
  --amber: #f0a02a;
  --amber-tint: #fbe7c4;
  --clay: #c96a4f;

  /* ---- Strokes (the only separator in the system) ------------------------ */
  --stroke-w: 1.5px;
  --stroke-w-strong: 2px;
  --stroke: var(--stroke-w) solid var(--ink);
  --stroke-strong: var(--stroke-w-strong) solid var(--ink);
  --hairline: 1px solid rgba(23, 23, 15, 0.16);
  --hairline-soft: 1px solid rgba(23, 23, 15, 0.09);

  --stroke-on-ink: var(--stroke-w) solid rgba(243, 239, 226, 0.24);
  --hairline-on-ink: 1px solid rgba(243, 239, 226, 0.14);

  /* ---- Type -------------------------------------------------------------- */
  --font-display: "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Sizes stay large, but not so large that a headline collapses to 3–4 words. */
  --t-display: clamp(2.4rem, 1.35rem + 3.8vw, 4.75rem);
  --t-h1: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem);
  --t-h2: clamp(1.85rem, 1.25rem + 2.1vw, 3.05rem);
  --t-h3: clamp(1.28rem, 1.14rem + 0.55vw, 1.55rem);
  --t-h4: clamp(1.04rem, 0.99rem + 0.24vw, 1.14rem);
  --t-lead: clamp(1.08rem, 1.02rem + 0.32vw, 1.22rem);
  --t-body: clamp(1rem, 0.98rem + 0.12vw, 1.08rem);
  --t-sm: 0.92rem;
  --t-xs: 0.84rem;
  --t-2xs: 0.78rem;
  --t-micro: 0.7rem;

  --lh-display: 1.12;
  --lh-head: 1.18;
  --lh-body: 1.65;

  --ls-display: -0.012em;
  --ls-head: -0.008em;
  --ls-sans: -0.004em;
  --ls-caps: 0.12em;

  /* ---- Space ------------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  --section-y: clamp(64px, 6.4vw, 116px);
  --room-y: clamp(56px, 5.6vw, 104px);
  --shell: 1200px;
  --shell-narrow: 940px;
  --gutter: clamp(18px, 4vw, 40px);

  /* ---- Radii — oversized, "polished pebble" ------------------------------ */
  --r-room: clamp(28px, 3.6vw, 64px);
  --r-card: clamp(20px, 2vw, 30px);
  --r-inner: 16px;
  --r-tight: 10px;
  --r-pill: 999px;

  /* ---- Motion — slow, quiet, never bouncy ------------------------------- */
  --e-out: cubic-bezier(0.22, 0.68, 0.24, 1);
  --e-in-out: cubic-bezier(0.5, 0.02, 0.28, 1);
  --d-fast: 180ms;
  --d-base: 300ms;
  --d-slow: 560ms;
  --d-reveal: 900ms;

  --flow-speed: 1;
  --z-nav: 60;
}

/* The page is light by design; tell the UA so form controls match. */
:root {
  color-scheme: light;
}

/* ==========================================================================
   Surface polarity
   --------------------------------------------------------------------------
   Chips, tags, stamps and hairlines live on both cream and near-black
   surfaces — including cream panels nested inside a dark room. Contextual
   selectors (".room .chip") could not express that: they also hit the light
   panels inside the room and painted pale text on cream.

   So every surface declares its own polarity and components only read these
   variables. Nesting then resolves itself: the closest surface wins.
   ========================================================================== */

/* Dark surfaces come first so that a light surface nested inside one — a cream
   panel in a dark room — can win with the same specificity. */
.room,
.panel,
.card--ink,
.surface--ink {
  --fg: var(--on-ink);
  --fg-mute: var(--on-ink-mute);
  --fg-fog: var(--on-ink-fog);
  --line: rgba(243, 239, 226, 0.22);
  --line-soft: rgba(243, 239, 226, 0.12);
  --line-strong: rgba(243, 239, 226, 0.34);
  --tile: rgba(243, 239, 226, 0.09);

  --accent-bg: rgba(215, 220, 255, 0.18);
  --accent-fg: #e4e7ff;
  --accent-line: rgba(215, 220, 255, 0.55);

  --match-bg: rgba(126, 206, 175, 0.15);
  --match-fg: #a6dfc7;
  --match-line: rgba(126, 206, 175, 0.42);

  --live-bg: rgba(240, 160, 42, 0.16);
  --live-fg: #f4b356;
  --live-line: rgba(240, 160, 42, 0.45);

  --neg-bg: rgba(201, 106, 79, 0.16);
  --neg-fg: #ecb098;
  --neg-line: rgba(201, 106, 79, 0.45);
}

:root,
.panel--paper,
.phone,
.surface--paper {
  --fg: var(--on-paper);
  --fg-mute: var(--on-paper-mute);
  --fg-fog: var(--on-paper-fog);
  --line: rgba(23, 23, 15, 0.18);
  --line-soft: rgba(23, 23, 15, 0.09);
  --line-strong: var(--ink);
  --tile: var(--paper-sunk);

  --accent-bg: var(--periwinkle);
  --accent-fg: var(--ink);
  --accent-line: var(--ink);

  --match-bg: var(--pine-tint);
  --match-fg: #0d3b31;
  --match-line: rgba(18, 72, 60, 0.32);

  --live-bg: var(--amber-tint);
  --live-fg: #7d4c0c;
  --live-line: rgba(240, 160, 42, 0.5);

  --neg-bg: #f7e2da;
  --neg-fg: #8a3b23;
  --neg-line: rgba(201, 106, 79, 0.5);
}