/* ============================================================================
   Luria design system, single source of truth for tokens + fonts.
   Loaded identically on marketing (landing), onboarding, and app surfaces.
   Default palette: true/near-black layered surfaces (app + legacy pages).
   Light marketing palette: opt-in via <html data-palette="light">.
   Shipping palette: html[data-theme="dark"] (stamped by theme-config.js),
   the §5 dark colorway of the template port work order (01_docs/01_planning/).
   Type: Instrument Serif (display) · Inter (body) · JetBrains Mono (mono).
   All fonts served from origin to satisfy CSP `font-src 'self'`.
   ============================================================================ */

/* ---- Fonts (self-hosted woff2, CSP-safe; all faces live in fonts.css) ---- */
@import url("/styles/fonts.css");

:root {
  /* ---- Surfaces (near/true black, layered by elevation) ---- */
  --bg:            #000000;
  --surface-1:     #0A0A0B;
  --surface-2:     #141416;
  --surface-3:     #1C1C20;
  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(255,255,255,.14);

  /* ---- Text (high-contrast, opacity-stepped hierarchy) ---- */
  --text:          #FFFFFF;
  --display-ink:   #FFFFFF;   /* display type; palettes override below */
  --text-2:        rgba(255,255,255,.64);
  --text-3:        rgba(255,255,255,.42);
  --text-inverse:  #000000;

  /* ---- Accent: one cold electric blue. No gradients, no glow-by-default. ---- */
  --accent:        #4C6BFF;
  --accent-hover:  #6E86FF;
  --accent-press:  #3B57E6;
  --accent-tint:   rgba(76,107,255,.12);
  --accent-line:   rgba(76,107,255,.38);
  --on-accent:     #FFFFFF;
  --accent-text:   #6E86FF;

  /* ---- Loss red: ONLY the onboarding "money you're missing" figure. As
     rationed as accent — never decorate with it. 7.4:1 on --surface-1. ---- */
  --loss:          #FF7A70;

  /* ---- Result colours: /app dashboard ONLY (split-test verdicts, arm rates,
     lift figures). Green means the variant is winning, red means it is losing.
     Rationed to numbers and verdict pills; never a background, never chrome.
     Added 2026-09-08 (DESIGN.md 2.1). ---- */
  --win:           #46D48A;
  --win-tint:      rgba(70,212,138,.12);
  --win-line:      rgba(70,212,138,.42);
  --loss-tint:     rgba(255,122,112,.12);
  --loss-line:     rgba(255,122,112,.42);

  /* ---- Split-test version colours (/app/tests, 2026-09-12): one colour per
     version, carried through every dot, bar, line and interval. Control is
     the accent blue; the rest are chosen to stay apart from --win green and
     --loss red on a dark ground. Data only, never chrome. ---- */
  --arm-0:         #4C6BFF;
  --arm-1:         #C084FC;
  --arm-2:         #2DD4BF;
  --arm-3:         #FB923C;
  --arm-4:         #F472B6;
  --arm-5:         #A3E635;
  --arm-6:         #38BDF8;

  /* ---- Type families ---- */
  --font-display: "Fraunces", "Instrument Serif", Georgia, serif;
  --font-book:    "Instrument Serif", Georgia, serif;  /* the lighter book cut */
  --wt-display:   600;   /* headings: bold enough to carry a dark page */
  --wt-wordmark:  900;   /* the company name, a step heavier than any heading */
  --font-body:    "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Type scale (swiss: intentional, few steps) ---- */
  --fs-display:  clamp(44px, 6.2vw, 82px);
  --fs-h1:       clamp(38px, 5vw, 60px);
  --fs-h2:       clamp(28px, 3.4vw, 40px);
  --fs-h3:       24px;
  --fs-body-lg:  20px;
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-cap:      13px;
  --fs-micro:    12px;

  --lh-tight:    0.95;
  --lh-snug:     1.15;
  --lh-body:     1.6;

  --track-tight: -0.03em;
  --track-eyebrow: 0.18em;

  /* ---- Spacing ---- */
  --s-1:4px; --s-2:6px; --s-3:8px; --s-4:10px; --s-5:12px; --s-6:16px;
  --s-7:18px; --s-8:20px; --s-9:24px; --s-10:32px; --s-11:40px; --s-12:48px;
  --s-13:64px; --s-14:96px; --s-15:128px; --s-16:180px;

  /* ---- Radii ---- */
  --r-1:6px; --r-2:8px; --r-3:12px; --r-4:16px; --r-5:20px; --r-6:24px; --r-pill:999px;

  /* ---- Layout ---- */
  --maxw:1200px;
  --gutter:24px;

  /* ---- Motion (ease-out only, 180 to 600ms, zero bounce) ---- */
  --ease:        cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:    180ms;
  --dur:         300ms;
  --dur-slow:    500ms;
  --dur-reveal:  600ms;

  /* ---- Elevation (layered shadows, not borders) ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.24);
  --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.36);
}

/* ---- Light marketing palette (landing/onboarding/legal opt in) ----------- */
html[data-palette="light"] {
  --bg:            #F4F2EE;
  --surface-1:     #FFFFFF;
  --surface-2:     #EFEDE8;
  --surface-3:     #E9E6E0;
  --line:          rgba(10,10,10,.12);
  --line-strong:   rgba(10,10,10,.22);

  --text:          #0A0A0A;
  --display-ink:   #0A0A0A;
  --text-2:        rgba(10,10,10,.6);
  --text-3:        rgba(10,10,10,.35);
  --text-inverse:  #F4F2EE;

  /* Task-spec aliases (same values, alternate naming) */
  --ink:           #0A0A0A;
  --ink-60:        rgba(10,10,10,.6);
  --ink-35:        rgba(10,10,10,.35);

  /* Accent appears ONLY on: winning box, lift figures, primary CTA, live dot. */
  --accent:        #1B4DFF;
  --accent-hover:  #3D66FF;
  --accent-press:  #1440D9;
  --accent-tint:   rgba(27,77,255,.10);
  --accent-line:   rgba(27,77,255,.35);
  --on-accent:     #FFFFFF;
  --accent-text:   #1B4DFF;

  /* loss red on cream/white: 4.7:1 on --bg, 5.3:1 on --surface-1 */
  --loss:          #C6362C;

  /* win green on cream/white: 4.9:1 on --bg (dashboard verdicts only) */
  --win:           #0A7A45;
  --win-tint:      rgba(10,122,69,.10);
  --win-line:      rgba(10,122,69,.38);
  --loss-tint:     rgba(198,54,44,.10);
  --loss-line:     rgba(198,54,44,.38);

  --shadow-1: 0 1px 2px rgba(10,10,10,.08), 0 2px 8px rgba(10,10,10,.06);
  --shadow-2: 0 2px 4px rgba(10,10,10,.08), 0 12px 32px rgba(10,10,10,.10);
}
html[data-palette="light"] .lr-img { outline-color: rgba(10,10,10,.10); }
html[data-palette="light"] .btn-secondary { background: rgba(10,10,10,.05); }
html[data-palette="light"] .btn-secondary:hover { background: rgba(10,10,10,.09); }

/* ---- Dark theme: near-black ground, warm ink ---------------------------
   Active via <html data-theme="dark">, stamped by /theme-config.js
   (DEFAULT_THEME). Declared AFTER the light block so it wins at equal
   specificity. data-theme="light" has NO rules on purpose: flipping the
   config back to "light" restores every page's original palette exactly.
   Palette (template port work order §5): three depths, not two,
   #07070A ground, #0E0E13 panel, #14142E hero block, separated by
   rgba(242,240,234,.10) hairlines, never shadows. Ink is warm (#F2F0EA)
   on a cold ground. Cold blue (--accent) is for data, links and the box
   language; warm amber (--warm) is for action and appears 4-5× per page. */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #07070A;   /* page ground */
  --bg-raised:     #0E0E13;
  --surface:       #0E0E13;   /* raised panel */
  --surface-1:     #0E0E13;
  --surface-2:     #13131A;
  --surface-3:     #181821;
  --hero-block:    #14142E;   /* the big rounded card: deep ink-indigo, not bright */
  --tile:          rgba(242,240,234,.06); /* inner tile on a panel or the hero block */
  --line:          rgba(242,240,234,.10); /* hairlines do all the separating */
  --line-strong:   rgba(242,240,234,.20);

  --text:          #F2F0EA;
  --display-ink:   #F5F3ED;   /* display type runs a step brighter */
  --text-2:        rgba(242,240,234,.64);
  /* .50 not .40: at .40 this token measured 3.42-3.49:1 on the four surfaces,
     under the 4.5:1 floor for the small text it drives (eyebrows, fine print,
     footer, captions). .50 measures 4.74-4.82:1 everywhere. */
  --text-3:        rgba(242,240,234,.50);
  --text-inverse:  #07070A;

  --ink:           #F2F0EA;
  --ink-60:        rgba(242,240,234,.64);
  --ink-35:        rgba(242,240,234,.50);

  /* cold blue: numbers, chart strokes, links, detection boxes. 4.6:1 on the
     ground; labels ON an accent fill go near-black (white is only 3.8:1) */
  --accent:        #4C6BFF;
  --accent-hover:  #6E86FF;
  --accent-press:  #3B57E6;
  --accent-tint:   rgba(76,107,255,.14);
  --accent-line:   rgba(76,107,255,.45);
  --on-accent:     #07070A;
  /* --accent as SMALL TEXT measures 4.15-4.45:1 on the panel/tile/hero fills,
     just under the floor. Small accent text uses this lifted shade (5.57-6.24:1);
     --accent itself stays the fill/border/large-number color (needs 3:1, passes). */
  --accent-text:   #6E86FF;

  /* loss red (dark): 7.4:1 on the panel fill */
  --loss:          #FF7A70;

  /* win green (dark): 10.9:1 on --app-card. Dashboard verdicts only. */
  --win:           #46D48A;
  --win-tint:      rgba(70,212,138,.14);
  --win-line:      rgba(70,212,138,.45);
  --loss-tint:     rgba(255,122,112,.14);
  --loss-line:     rgba(255,122,112,.45);

  --arm-0:         #6E86FF;
  --arm-1:         #C084FC;
  --arm-2:         #2DD4BF;
  --arm-3:         #FB923C;
  --arm-4:         #F472B6;
  --arm-5:         #A3E635;
  --arm-6:         #38BDF8;

  /* warm amber: the one action color, primary CTA, guarantee line, active
     nav item, the arrow glyphs between flow tiles. Nowhere else. */
  --warm:          #E0A03A;
  --warm-hover:    #EBB15A;
  --warm-press:    #C98E2F;
  --on-warm:       #07070A;

  --shadow-1: none;
  --shadow-2: none;

  /* ---- /app dashboard tokens. The app's inline styles use
     var(--app-*, <original literal>), undefined outside dark, so the
     default near-black dashboard renders byte-identically on revert. ---- */
  --app-card:        #0E0E13;
  --app-card2:       #13131A;
  --app-line-soft:   rgba(242,240,234,.08);
  --app-line2:       rgba(242,240,234,.14);
  --app-hover:       rgba(242,240,234,.18);
  --app-bar:         rgba(242,240,234,.32);
  --app-t-strong:    rgba(242,240,234,.84);
  --app-t-mid:       rgba(242,240,234,.64);
  --app-t-dim:       rgba(242,240,234,.45);
  --app-accent-tint: rgba(76,107,255,.15);
  --app-accent-line: rgba(76,107,255,.5);
  --app-accent-glow: rgba(76,107,255,.22);
  --app-accent-bar:  rgba(76,107,255,.65);
  --app-on-accent:   #07070A;
}
html[data-theme="dark"] .lr-img { outline-color: rgba(242,240,234,.12); }
html[data-theme="dark"] .btn-secondary { background: rgba(242,240,234,.07); }
html[data-theme="dark"] .btn-secondary:hover { background: rgba(242,240,234,.12); }

/* ---- /app light appearance (2026-09-29, merchant feedback: "the colour
   design is really hard to look at"). White cards on a soft grey ground,
   ink text, hairline borders plus a faint shadow so every section reads as
   its own box. theme-config.js sets html[data-appearance] on /app pages only
   (default light, the sidebar toggle stores dark). Declared after the dark
   block so it wins at equal specificity; the platform block below still
   recolours the accent. ---- */
html[data-appearance="light"] {
  color-scheme: light;
  --bg:            #F4F5F7;
  --bg-raised:     #FFFFFF;
  --surface:       #FFFFFF;
  --surface-1:     #FFFFFF;
  --surface-2:     #F8F9FB;
  --surface-3:     #FFFFFF;
  --hero-block:    #EEF1FF;
  --tile:          rgba(17,24,39,.04);
  --line:          rgba(17,24,39,.11);
  --line-strong:   rgba(17,24,39,.20);

  --text:          #111827;
  --display-ink:   #0B1020;
  --text-2:        rgba(17,24,39,.70);
  --text-3:        rgba(17,24,39,.58);
  --text-inverse:  #FFFFFF;
  --ink:           #111827;
  --ink-60:        rgba(17,24,39,.70);
  --ink-35:        rgba(17,24,39,.58);

  --accent:        #3050F0;
  --accent-hover:  #2440D8;
  --accent-press:  #1D35B8;
  --accent-tint:   rgba(48,80,240,.08);
  --accent-line:   rgba(48,80,240,.34);
  --on-accent:     #FFFFFF;
  --accent-text:   #2742D6;

  --loss:          #C6362C;
  --win:           #0A7A45;
  --win-tint:      rgba(10,122,69,.09);
  --win-line:      rgba(10,122,69,.36);
  --loss-tint:     rgba(198,54,44,.08);
  --loss-line:     rgba(198,54,44,.34);

  --arm-0:         #3050F0;
  --arm-1:         #9333EA;
  --arm-2:         #0D9488;
  --arm-3:         #EA580C;
  --arm-4:         #DB2777;
  --arm-5:         #65A30D;
  --arm-6:         #0284C7;

  /* action colour: the same amber idea, dark enough for white text (5.0:1) */
  --warm:          #B45309;
  --warm-hover:    #92400E;
  --warm-press:    #7C3A0C;
  --on-warm:       #FFFFFF;

  --shadow-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.07);
  --shadow-2: 0 4px 8px rgba(16,24,40,.06), 0 12px 28px rgba(16,24,40,.12);

  --app-bg:          #F4F5F7;
  --app-card:        #FFFFFF;
  --app-card2:       #F8F9FB;
  --app-line-soft:   rgba(17,24,39,.08);
  --app-line2:       rgba(17,24,39,.14);
  --app-hover:       rgba(17,24,39,.06);
  --app-bar:         rgba(17,24,39,.28);
  --app-t-strong:    rgba(17,24,39,.88);
  --app-t-mid:       rgba(17,24,39,.70);
  --app-t-dim:       rgba(17,24,39,.58);
  --app-accent-tint: rgba(48,80,240,.07);
  --app-accent-line: rgba(48,80,240,.32);
  --app-accent-glow: rgba(48,80,240,.07);
  --app-accent-bar:  rgba(48,80,240,.60);
  --app-on-accent:   #FFFFFF;
}

/* ---- Base reset / global type -------------------------------------------- */
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
/* Form controls don't inherit font-family from body, only the family, so
   size/weight stay whatever each component already set. */
button, input, select, textarea { font-family: inherit; }

h1,h2,h3,.lr-display,.lr-h1,.lr-h2 {
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}
h3 { line-height: 1.1; } /* 0.95 is display-size only */
p { text-wrap: pretty; }

.lr-display { font-size: var(--fs-display); }
.lr-h1      { font-size: var(--fs-h1); }
.lr-h2      { font-size: var(--fs-h2); line-height: var(--lh-snug); }
.lr-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* Numbers that update must not reflow */
.tnum { font-variant-numeric: tabular-nums; }

/* Images get a subtle 1px inset outline (pure white on dark) */
.lr-img { outline: 1px solid rgba(255,255,255,.10); outline-offset: -1px; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition-property: background-color, color, scale, box-shadow, border-color;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease);
}
.btn:active { scale: 0.96; }
.btn-primary   { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: rgba(255,255,255,.06); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-secondary:hover { background: rgba(255,255,255,.10); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Scroll-reveal primitives (driven by motion.js) ---------------------- */
.reveal { opacity: 0; transform: translateY(18px); will-change: transform, opacity; }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
/* stagger children via inline --i index */
.reveal-stagger > * { opacity: 0; transform: translateY(16px); }
.reveal-stagger.is-in > * {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
/* headline word/line reveal */
.word { display: inline-block; opacity: 0; transform: translateY(0.5em); }
.reveal-words.is-in .word {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
  transition-delay: calc(var(--wi, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .word { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:active { scale: 1; }
  * { scroll-behavior: auto !important; }
}

/* ---- Platform look (2026-09-11). The dashboard sets html[data-platform] from
   /api/ghl (lib/platforms.mjs). GoHighLevel sites read green; Shopify keeps
   the blue above. Tokens only, every component follows. ---- */
html[data-platform="gohighlevel"] {
  --accent:        #1FA971;
  --accent-hover:  #2BC184;
  --accent-press:  #188A5C;
  --accent-tint:   rgba(31,169,113,.12);
  --accent-line:   rgba(31,169,113,.38);
  --accent-text:   #2BC184;
  --app-accent-line: rgba(31,169,113,.38);
}
/* WF-12 (2026-10-17): WooCommerce stores read purple, Webflow sites blue, HubSpot orange. */
html[data-platform="hubspot"] {
  --accent:        #E9704F;
  --accent-hover:  #F08668;
  --accent-press:  #C95A3C;
  --accent-tint:   rgba(233,112,79,.12);
  --accent-line:   rgba(233,112,79,.38);
  --accent-text:   #F29A80;
  --app-accent-line: rgba(233,112,79,.38);
}
html[data-platform="woocommerce"] {
  --accent:        #8A63C2;
  --accent-hover:  #9C78D0;
  --accent-press:  #7350A8;
  --accent-tint:   rgba(138,99,194,.12);
  --accent-line:   rgba(138,99,194,.38);
  --accent-text:   #A688D6;
  --app-accent-line: rgba(138,99,194,.38);
}
html[data-platform="webflow"] {
  --accent:        #4F5EF5;
  --accent-hover:  #6874F7;
  --accent-press:  #3B49D6;
  --accent-tint:   rgba(79,94,245,.12);
  --accent-line:   rgba(79,94,245,.38);
  --accent-text:   #7F8AF8;
  --app-accent-line: rgba(79,94,245,.38);
}