/* ════════════════════════════════════════════════════════════════════
   INTUITION · LOCKED DIRECTION  ·  v1.2
   Canonical design tokens. Light mode is default; dark mode opts in via
   <html data-theme="dark"> or any ancestor with class="dark".

   Palette deltas vs v1.1 (Jay-approved 2026-05-02):
     - Light  --paper      shifted from #F4E0D8 → #FAE5C8 (warmer cream)
     - Light  --paper-2    shifted from #BFD4CB eucalyptus → #F2D9B5 warm sand
                           (returns to a single warm-earth surface family)
     - Light  --primary    shifted from #FF6A4A coral → #A8331F deep brick-red
     - Dark   --paper      shifted from #0E1F22 teal-black → #0F1620 navy-black
     - Dark   --primary    shifted from #FF3845 → #D81E2F (deeper red)
     - DROPPED: --royal, --scarlet, --foil (palette is now 7 roles)

   Type, components, shadows, rules: UNCHANGED from v1.1.

   Import once at the root of any surface:
     <link rel="stylesheet" href=".../physea-tokens.css">

   Or inline the :root blocks below into a <style> tag.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Fonts ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&family=Plus+Jakarta+Sans:wght@300..700&family=IBM+Plex+Mono:wght@400;500;700&display=swap');

/* ─── Light mode (default) — warm day palette ───────────────────────
   light paper · pale-crimson/maroon primary · orange secondary        */
:root {
  /* surface */
  --paper:       #F6EBDF;   /* primary surface — light warm paper */
  --paper-2:     #EEDFCE;   /* raised surface — soft sand */
  --paper-3:     #E6D2BD;   /* deepest surface — pale peach-rose */
  --ink:         #271A26;   /* primary text — deep plum-ink (ties to dark bg) */
  --ink-2:       #625260;   /* secondary text — muted plum-grey */

  /* brand */
  --primary:     #B33F50;   /* pale crimson / light maroon — CTA, pip, underline */
  --on-primary:  #F6EBDF;   /* text on primary fills */
  --accent:      #A86A23;   /* warm orange — secondary accent */
  --status:      #5587A4;   /* soft steel-blue — live / online */

  /* semantic states — values carried from landing.html's proven palette */
  --ok:          #366B46;   /* success / worked — deep green */
  --amber:       #8F5A1D;   /* warning / pending — darkened from #A86A23 to pass AA as text (4.90 on paper) */
  --plan:        #7A5F11;   /* planned / partial — olive gold */
  --err:         var(--primary);   /* error — rides the brand crimson */

  /* text-safe variants — --accent (3.76) and --status (3.32) miss AA as
     body text on light paper; use these when the color carries words */
  --accent-text: #8F5A1D;   /* 4.90 on paper */
  --status-text: #4A6C84;   /* 4.75 on paper */

  /* type */
  --font-head:   'Syne', 'Inter Tight', sans-serif;
  --font-ui:     'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:   'IBM Plex Mono', ui-monospace, monospace;
  --font-detail: var(--font-ui);   /* long-form body/detail text — TBD, defaults to UI */

  /* convenience aliases — legacy/short names some surfaces reference.
     --ink-3 is a muted third ink, derived so it re-resolves per theme. */
  --sans:        var(--font-ui);
  --mono:        var(--font-mono);
  --ink-3:       color-mix(in srgb, var(--ink-2) 92%, var(--paper));  /* 92% keeps AA (4.5+) on every surface both themes; 72% measured 3.33 on light paper */

  /* headline rhythm (Syne 400, tight) */
  --head-weight:    400;
  --head-tracking:  -0.06em;
  --head-leading:   1.13;
  --head-scale:     10.5vw;

  /* component */
  --button-radius: 14px;
  --chip-style:    raised;
  --light-surface: inset;
  --dark-surface:  clay;

  /* radius scale — one ladder every surface snaps to (was 32 ad-hoc px values) */
  --radius-xs:   8px;    /* checkboxes, tiny insets */
  --radius-sm:   10px;   /* menu items, list chips, small controls */
  --radius-md:   12px;   /* inputs, list rows, default surfaces */
  --radius-lg:   14px;   /* app bars, alerts, panels */
  --radius-xl:   16px;   /* cards, stat blocks, large panels */
  --radius-pill: 999px;  /* fully-round: chips, tracks, progress */
  --radius:      var(--radius-md);   /* legacy alias */

  /* type scale — use these instead of px literals for typography */
  --text-xs:   11px;   /* mono eyebrows, labels, captions */
  --text-sm:   13.5px; /* UI body, input text, helper text */
  --text-md:   16px;   /* emphasized body, lead paragraphs */
  --text-lg:   20px;   /* subheads, card titles */
  --text-xl:   24px;   /* section heads */
  --text-2xl:  32px;  /* page heads, large cards */
  --text-3xl:  48px;  /* display (syne) — hero scale */

  /* spacing scale — consistent padding/margin rhythm */
  --space-xs:  4px;    /* tight icon gaps, inline spacing */
  --space-sm:  8px;    /* button icon gaps, small insets */
  --space-md:  12px;   /* default component padding */
  --space-lg:  16px;   /* card padding, section gaps */
  --space-xl:  24px;   /* large section spacing */
  --space-2xl: 32px;   /* page section margins */
  --space-3xl: 48px;   /* hero/landing spacing */

  /* hairlines / shadows derived from ink (36,23,38) */
  --rule:        rgba(39, 26, 38, .12);
  --rule-soft:   rgba(39, 26, 38, .06);
  --rule-bold:   rgba(39, 26, 38, .32);
  --shadow-soft: 0 1px 0 rgba(255,255,255,.7), 18px 18px 40px rgba(36,23,38,.10);
  --shadow-clay: inset 6px 6px 18px rgba(36,23,38,.16), inset -6px -6px 18px rgba(255,255,255,.6);
}

/* ─── Dark mode — jewel night palette ───────────────────────────────
   deep plum/indigo background · magenta-purple-red primary            */
:root[data-theme="dark"],
.dark {
  /* surface */
  --paper:       #261224;   /* primary surface — deep plum-indigo */
  --paper-2:     #331C31;   /* raised surface — plum */
  --paper-3:     #40263E;   /* deepest surface — violet */
  --ink:         #F0E6DB;   /* primary text — warm cream */
  --ink-2:       #BDABBA;   /* secondary text — muted lilac */

  /* brand */
  --primary:     #E56D7A;   /* brightened magenta — passes 4.5 as text on dark */
  --on-primary:  #261224;   /* dark ink labels on the bright magenta fill */
  --accent:      #D69551;   /* warm amber — echoes light's orange */
  --status:      #73A6C4;   /* cyan-blue — live / online */

  /* semantic states — dark values carried from landing.html */
  --ok:          #86C293;   /* success / worked — soft green */
  --amber:       #F0AC55;   /* warning / pending — bright amber */
  --plan:        #EBCE5C;   /* planned / partial — pale gold */
  --err:         var(--primary);   /* error — rides the brand magenta */

  /* text-safe variants — dark accent/status already pass AA (6.93 / 6.68) */
  --accent-text: var(--accent);
  --status-text: var(--status);

  /* hairlines / shadows (ink 241,232,221) */
  --rule:        rgba(240, 230, 219, .14);
  --rule-soft:   rgba(240, 230, 219, .07);
  --rule-bold:   rgba(240, 230, 219, .34);
  --shadow-soft: 0 1px 0 rgba(255,255,255,.05), 18px 18px 40px rgba(0,0,0,.42);
  --shadow-clay: inset 6px 6px 18px rgba(0,0,0,.5), inset -6px -6px 18px rgba(241,232,221,.05);
}

/* ─── Convenience classes ───────────────────────────────────────── */

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
}

.headline {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  letter-spacing: var(--head-tracking);
  line-height: var(--head-leading);
  font-size: clamp(2.5rem, var(--head-scale), 9rem);
  color: var(--ink);
}

/* italicized expressive word — primary underline rule */
.headline .accent {
  position: relative;
  white-space: nowrap;
}
.headline .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.04em;
  height: 0.06em;
  background: var(--primary);
  border-radius: 999px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .55;
}
.eyebrow .pip,
.eyebrow-pip {
  color: var(--primary);
  opacity: 1;
  font-family: var(--font-mono);
  margin-right: 0.4em;
}

/* Canonical button is `.b` in physea-components.css (clay-gradient, focus ring,
   size + variant modifiers). The old flat `.btn` here was a second, divergent
   implementation nothing consumed — removed so there is one source of truth. */
