/* ============================================================
   TRACKEN — Landing v5
   Five named palettes (foundation + accent), each with light & dark.
   The accent, neutrals and signal grammar are shared by the page
   chrome AND the in-page product demos via one token set.
   Palette + Theme (light/dark) are tweakable.
   ============================================================ */

/* ---- derived tokens + shared grammar (theme-agnostic) ------- */
:root {
  /* WARM-TINTED neutral foundation — shared by every palette.
     No pure greys: every neutral carries a faint paper-warm cast. */
  --bg-0: #FAF8F4; --bg-1: #FFFDF9; --line: #E9E4DA; --fg-0: #1C1A16; --fg-2: #6E6A60;

  /* steps derived from the base tokens (inherit the warm cast) */
  --bg-2: color-mix(in oklab, var(--bg-1), var(--fg-0) 4%);
  --bg-3: color-mix(in oklab, var(--bg-1), var(--fg-0) 8%);
  --bg-4: color-mix(in oklab, var(--bg-1), var(--fg-0) 13%);
  --line-soft: color-mix(in oklab, var(--line), var(--bg-1) 50%);
  --line-hard: color-mix(in oklab, var(--line), var(--fg-0) 22%);
  --fg-1: color-mix(in oklab, var(--fg-0), var(--fg-2) 45%);
  --fg-3: color-mix(in oklab, var(--fg-2), var(--bg-0) 40%);
  --fg-4: color-mix(in oklab, var(--fg-2), var(--bg-0) 64%);
  --accent-hi: color-mix(in oklab, var(--accent), var(--fg-0) 20%);
  --accent-lo: color-mix(in oklab, var(--accent), var(--bg-0) 30%);
  --accent-bg: color-mix(in oklab, var(--accent) 12%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 30%, transparent);

  /* ============================================================
     SHARED SIGNAL PALETTE — identical across all five themes.
     This is Tracken's color grammar: conviction bands + type chips.
     ============================================================ */
  /* conviction bands (importance / severity) */
  --conv-low: #8A8A8A;  --conv-low-bg: #EDEDEC;  --conv-low-fg: #5F5F5C;
  --conv-med: #C99B3D;  --conv-med-bg: #F6E8CE;  --conv-med-fg: #7A5A18;
  --conv-high: #A4453B; --conv-high-bg: #F6E3DF; --conv-high-fg: #8A352B;
  /* 10 type-tag chips (signal-type language) */
  --chip-language-bg:#E4ECF5; --chip-language-fg:#2D4A6B;
  --chip-contradiction-bg:#F3E4DB; --chip-contradiction-fg:#8A4B2D;
  --chip-convergence-bg:#E3EDE1; --chip-convergence-fg:#3A5A38;
  --chip-insider-bg:#EFE6F0; --chip-insider-fg:#5E3A66;
  --chip-event-bg:#E9EBED; --chip-event-fg:#4A4F57;
  --chip-regulatory-bg:#DEECEA; --chip-regulatory-fg:#1F4E48;
  --chip-convbreak-bg:#F5ECD2; --chip-convbreak-fg:#7A5A18;
  --chip-silence-bg:#E6E6E5; --chip-silence-fg:#2E2E2C;
  --chip-synthesis-bg:#E6E6F2; --chip-synthesis-fg:#3A3A6B;
  --chip-thesis-bg:#F1E3DC; --chip-thesis-fg:#7A3F2A;
  /* directional (P&L) — derived from the grammar, not pure green/red */
  --up: var(--chip-convergence-fg); --up-bg: var(--chip-convergence-bg);
  --down: var(--conv-high); --down-bg: var(--conv-high-bg);
  --alert: var(--conv-med); --alert-bg: var(--conv-med-bg);

  --r-xs: 5px; --r-sm: 7px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-pill: 999px;
  --shadow-card: 0 1px 2px oklch(0 0 0 / 0.05), 0 10px 30px -18px oklch(0 0 0 / 0.16);
  --shadow-pop: 0 30px 80px -34px oklch(0 0 0 / 0.26);
  --grain: oklch(0.2 0 0 / 0.05);

  /* legacy aliases so section CSS keeps working */
  --bg: var(--bg-0); --surface: var(--bg-1); --surface-2: var(--bg-2); --surface-3: var(--bg-3);
  --hairline: var(--line-soft); --hairline-2: var(--line); --hairline-3: var(--line-hard);
  --text-1: var(--fg-0); --text-2: var(--fg-2); --text-3: var(--fg-3); --text-4: var(--fg-4);
  --accent-2: var(--accent-hi); --accent-soft: var(--accent-bg); --accent-ink: var(--on-accent);
  --green: var(--up); --green-soft: var(--up-bg); --red: var(--down); --red-soft: var(--down-bg);
  --orange: var(--alert); --orange-soft: var(--alert-bg);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
  --maxw: 1240px; --gutter: clamp(20px, 5vw, 64px);
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  /* warm-tinted dark neutrals */
  --bg-0: #16140F; --bg-1: #1E1B16; --line: #2F2B23; --fg-0: #F0EDE5; --fg-2: #9A9588;
  /* conviction + chips — dark mode (dark fill, light tint of same hue) */
  --conv-low-bg: #2C2C2A;  --conv-low-fg: #C9C9C6;
  --conv-med-bg: #412404;  --conv-med-fg: #EAC77A;
  --conv-high-bg: #4A1B17; --conv-high-fg: #E2A39A;
  --chip-language-bg:#1A2A3D; --chip-language-fg:#A9C4E0;
  --chip-contradiction-bg:#3A241A; --chip-contradiction-fg:#D9A488;
  --chip-convergence-bg:#1E2C1D; --chip-convergence-fg:#A6C2A2;
  --chip-insider-bg:#2C1F30; --chip-insider-fg:#C3A6C9;
  --chip-event-bg:#23262B; --chip-event-fg:#AEB4BC;
  --chip-regulatory-bg:#152826; --chip-regulatory-fg:#8FBDB6;
  --chip-convbreak-bg:#322713; --chip-convbreak-fg:#D6B978;
  --chip-silence-bg:#222220; --chip-silence-fg:#B0B0AD;
  --chip-synthesis-bg:#1E1E33; --chip-synthesis-fg:#A8A8D0;
  --chip-thesis-bg:#34211A; --chip-thesis-fg:#D2A188;
  --conv-high: #D2796E; --conv-med: #E0B66A; --conv-low: #9C9C98;
  --up: var(--chip-convergence-fg); --up-bg: var(--chip-convergence-bg);
  --down: var(--conv-high); --down-bg: var(--conv-high-bg);
  --alert: var(--conv-med); --alert-bg: var(--conv-med-bg);
  --shadow-card: 0 1px 2px oklch(0 0 0 / 0.4), 0 16px 44px -22px oklch(0 0 0 / 0.6);
  --shadow-pop: 0 40px 110px -42px oklch(0 0 0 / 0.8);
  --grain: oklch(1 0 0 / 0.05);
}

/* ============================================================
   PALETTES — one cool accent each, on the shared warm foundation.
   The warm end is reserved for the signal system, so accents stay cool.
   ============================================================ */
/* 1 — Prussian ink (authoritative broadsheet) — default */
:root[data-palette="ink"] { --accent: #1B3A57; --on-accent: #FAF8F4; }
:root[data-palette="ink"][data-theme="dark"] { --accent: #7BA3C9; --on-accent: #16140F; }
/* 2 — Deep pine (distinctive) */
:root[data-palette="pine"] { --accent: #234E3C; --on-accent: #FAF8F4; }
:root[data-palette="pine"][data-theme="dark"] { --accent: #6FA98C; --on-accent: #16140F; }
/* 3 — Deep teal */
:root[data-palette="teal"] { --accent: #1C4D44; --on-accent: #FAF8F4; }
:root[data-palette="teal"][data-theme="dark"] { --accent: #5FA896; --on-accent: #16140F; }
/* 4 — Cool graphite (near-monochrome) */
:root[data-palette="graphite"] { --accent: #2E3338; --on-accent: #FAF8F4; }
:root[data-palette="graphite"][data-theme="dark"] { --accent: #B9C0C6; --on-accent: #16140F; }
/* 5 — Stone — EXACT tokens from the real app's "Stone" scheme
   (web/lib/theme: pure-monochrome oklch, chroma 0; colored up/down/alert
   semantics are kept even in Stone, matching the product). */
:root[data-palette="stone"] {
  --bg-0: oklch(0.975 0 0); --bg-1: oklch(1 0 0);
  --bg-2: oklch(0.960 0 0); --bg-3: oklch(0.930 0 0); --bg-4: oklch(0.900 0 0);
  --line: oklch(0.912 0 0); --line-soft: oklch(0.940 0 0); --line-hard: oklch(0.860 0 0);
  --fg-0: oklch(0.21 0 0); --fg-1: oklch(0.38 0 0); --fg-2: oklch(0.54 0 0); --fg-3: oklch(0.68 0 0); --fg-4: oklch(0.80 0 0);
  --accent: oklch(0.21 0 0); --accent-hi: oklch(0.32 0 0); --accent-lo: oklch(0.42 0 0);
  --accent-bg: oklch(0.21 0 0 / 0.06); --accent-line: oklch(0.21 0 0 / 0.18); --on-accent: oklch(0.99 0 0);
  --up: oklch(0.48 0.14 150); --up-bg: oklch(0.90 0.06 150 / 0.5);
  --down: oklch(0.52 0.22 25); --down-bg: oklch(0.92 0.07 25 / 0.5);
  --alert: oklch(0.58 0.17 60); --alert-bg: oklch(0.92 0.08 70 / 0.5);
  /* Stone is monochrome: the colored signal-type chip taxonomy collapses to
     neutral grey (the app renders type badges mono in Stone). Conviction +
     directional stay grey / amber / red, matching the product. */
  --conv-low: var(--fg-3); --conv-low-bg: var(--bg-3); --conv-low-fg: var(--fg-2);
  --conv-med: var(--alert); --conv-med-bg: var(--alert-bg); --conv-med-fg: var(--alert);
  --conv-high: var(--down); --conv-high-bg: var(--down-bg); --conv-high-fg: var(--down);
  --chip-language-bg: var(--bg-2); --chip-language-fg: var(--fg-2);
  --chip-contradiction-bg: var(--bg-2); --chip-contradiction-fg: var(--fg-2);
  --chip-convergence-bg: var(--bg-2); --chip-convergence-fg: var(--fg-2);
  --chip-insider-bg: var(--bg-2); --chip-insider-fg: var(--fg-2);
  --chip-event-bg: var(--bg-2); --chip-event-fg: var(--fg-2);
  --chip-regulatory-bg: var(--bg-2); --chip-regulatory-fg: var(--fg-2);
  --chip-convbreak-bg: var(--bg-2); --chip-convbreak-fg: var(--fg-2);
  --chip-silence-bg: var(--bg-2); --chip-silence-fg: var(--fg-2);
  --chip-synthesis-bg: var(--bg-2); --chip-synthesis-fg: var(--fg-2);
  --chip-thesis-bg: var(--bg-2); --chip-thesis-fg: var(--fg-2);
  /* crisp Stone corners (the app's Stone preset pairs with "subtle" radius) */
  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 9px;
}
:root[data-palette="stone"][data-theme="dark"] {
  --bg-0: oklch(0.165 0 0); --bg-1: oklch(0.210 0 0);
  --bg-2: oklch(0.250 0 0); --bg-3: oklch(0.290 0 0); --bg-4: oklch(0.330 0 0);
  --line: oklch(0.285 0 0); --line-soft: oklch(0.245 0 0); --line-hard: oklch(0.380 0 0);
  --fg-0: oklch(0.96 0 0); --fg-1: oklch(0.85 0 0); --fg-2: oklch(0.69 0 0); --fg-3: oklch(0.56 0 0); --fg-4: oklch(0.36 0 0);
  --accent: oklch(0.96 0 0); --accent-hi: oklch(0.88 0 0); --accent-lo: oklch(0.78 0 0);
  --accent-bg: oklch(0.96 0 0 / 0.12); --accent-line: oklch(0.96 0 0 / 0.22); --on-accent: oklch(0.17 0 0);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg-0); color: var(--fg-0);
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background .45s var(--ease-out), color .45s var(--ease-out);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, canvas, svg { display: block; max-width: 100%; }
::selection { background: var(--accent-bg); }

/* atmosphere — soft accent glow + neutral grain dot grid */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .8;
  background:
    radial-gradient(1150px 640px at 84% -10%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 58%),
    radial-gradient(900px 560px at 6% 4%, color-mix(in oklab, var(--accent) 6%, transparent), transparent 56%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image: radial-gradient(circle at 1px 1px, var(--grain) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(1100px 760px at 50% 26%, #000, transparent 80%);
          mask-image: radial-gradient(1100px 760px at 50% 26%, #000, transparent 80%);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 11px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-4); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(78px, 10vw, 148px); }
.hairline-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: calc(100% / 3) 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

/* ---------- type ---------- */
.overline {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fg-3); font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
}
.overline .tick { width: 20px; height: 1px; background: var(--accent); opacity: .7; }
.mono { font-family: var(--mono); font-feature-settings: "zero","ss01"; font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

.display { font-weight: 600; letter-spacing: -0.04em; line-height: 0.97; font-size: clamp(46px, 8vw, 100px); text-wrap: balance; }
.h2 { font-size: clamp(30px, 4.6vw, 56px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.0; text-wrap: balance; }
.h3 { font-size: clamp(19px, 2.3vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--fg-2); line-height: 1.56; letter-spacing: -0.01em; text-wrap: pretty; }
.kicker { color: var(--fg-2); }
.muted-head { color: var(--fg-3); }

/* emphasized headline phrase — colored accent in Stone, mono in Ink (its accent
   is monochrome), against a muted gray lead-in (no underline). */
.accent-ink { color: var(--accent); }
.display .hh-1 { color: var(--fg-3); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 22px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
  border: 1px solid var(--line-hard); background: var(--bg-1); color: var(--fg-0);
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn:hover { background: var(--bg-2); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); box-shadow: var(--shadow-pop); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--bg-2); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.arrow { transition: transform .25s var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- pills / tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px;
  border-radius: var(--r-xs); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
  border: 1px solid var(--line); color: var(--fg-2); white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pill-green  { color: var(--up);    background: var(--up-bg);    border-color: transparent; }
.pill-red    { color: var(--down);  background: var(--down-bg);  border-color: transparent; }
.pill-orange { color: var(--alert); background: var(--alert-bg); border-color: transparent; }
.pill-accent { color: var(--accent); background: var(--accent-bg); border-color: transparent; }
.tag { font-family: var(--mono); font-size: 11px; color: var(--fg-3); border: 1px solid var(--line); padding: 2px 8px; border-radius: var(--r-xs); white-space: nowrap; }

/* ---------- card ---------- */
.card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); position: relative; box-shadow: var(--shadow-card); }

/* ---------- live pulse ---------- */
.pulse { width: 7px; height: 7px; border-radius: 999px; background: var(--up); animation: breathe 2.6s var(--ease-in-out) infinite; }
@keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: .42; } }
.pulse-accent { background: var(--accent); }

/* ============================================================
   SCROLL REVEAL + motion utilities (background-tab safe)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
html.reveal-instant .reveal { transition: none !important; }
.reveal-d1 { transition-delay: .07s; } .reveal-d2 { transition-delay: .14s; }
.reveal-d3 { transition-delay: .21s; } .reveal-d4 { transition-delay: .28s; } .reveal-d5 { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}