/* ============================================================
   Noema — marketing site. Tokens are the SINGLE source of truth,
   lifted verbatim from DESIGN_TOKENS_V3.md / app globals.css.
   Reference a token, never a raw hex. Light + dark, both binding.
   ============================================================ */

:root {
  /* --- Neutrals (warm cream per §9; surface stays white) --- */
  --bg-canvas:#F6F4EC; --bg-surface:#FFFFFF; --bg-subtle:#F0EEE6; --bg-hover:#E9E5DA;
  --border-subtle:#E7E2D6; --border-default:#D9D3C6;
  --text-primary:#1C1C1A; --text-secondary:#6A6A65; --text-tertiary:#9A9A93;

  /* --- Accents --- */
  --accent:#4F46E5; --accent-hover:#4338CA;                 /* primary action + focus ring ONLY */
  --brand-accent:#3D6FA6; --brand-accent-tint:#EAF0F7;      /* Niya brand blue, muted — brand touches only */
  --btn-secondary-bg:#F0EEE6; --btn-secondary-border:#D9D3C6;

  /* --- Status (lifecycle chip) --- */
  --status-draft-fg:#6A6A65; --status-draft-bg:#F0F0EE;
  --status-edited-fg:#1D4ED8; --status-edited-bg:#E8EEFC;
  --status-locked-fg:#FFFFFF; --status-locked-bg:#15803D;   /* solid */

  /* --- Confidence (traffic-light) --- */
  --confidence-high-fg:#15803D; --confidence-high-bg:#E6F4EA;
  --confidence-medium-fg:#B45309; --confidence-medium-bg:#FBF0DC;
  --confidence-low-fg:#C2410C; --confidence-low-bg:#FBE8DC;
  --confidence-verify-fg:#B91C1C; --confidence-verify-bg:#FBE3E3;

  /* --- Finding-type --- */
  --finding-pain-fg:#E11D48; --finding-pain-bg:#FCE7EC;
  --finding-requirement-fg:#2563EB; --finding-requirement-bg:#E5EDFC;
  --finding-decision-fg:#7C3AED; --finding-decision-bg:#F0E9FC;
  --finding-constraint-fg:#D97706; --finding-constraint-bg:#FBF0DC;
  --finding-risk-fg:#EA580C; --finding-risk-bg:#FCEADD;
  --finding-insight-fg:#0D9488; --finding-insight-bg:#DCF4F1;
  --finding-question-fg:#0E7490; --finding-question-bg:#DFF1F5;
  --finding-conflict-fg:#BE185D; --finding-conflict-bg:#FBE3EE;

  /* --- Scope-variant (its own semantic — teal) --- */
  --scope-variant-fg:#0D9488; --scope-variant-bg:#DCF4F1;
  --canvas-dot:color-mix(in oklab, var(--text-tertiary) 18%, transparent);

  /* --- Radius / shadow / spacing --- */
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.08);
  --shadow-float:0 1px 2px rgba(0,0,0,.05),0 8px 28px rgba(28,28,26,.10),0 2px 8px rgba(28,28,26,.05);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-8:48px;

  /* --- Type --- */
  --font-sans:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
  --text-xs:12px; --text-sm:13px; --text-base:14px; --text-md:15px; --text-lg:16px; --text-xl:20px; --text-2xl:24px;

  --ease:cubic-bezier(.32,.72,0,1);
}

[data-theme="dark"] {
  --bg-canvas:#0C0C0D; --bg-surface:#161617; --bg-subtle:#1E1E20; --bg-hover:#27272A;
  --border-subtle:#2A2A2D; --border-default:#3A3A3E;
  --text-primary:#ECECEA; --text-secondary:#A1A19B; --text-tertiary:#6E6E68;
  --accent:#6366F1; --accent-hover:#818CF8;
  --brand-accent:#7BA7D8; --brand-accent-tint:#1B2740;
  --btn-secondary-bg:#27272A; --btn-secondary-border:#3A3A3E;

  --status-draft-fg:#A1A19B; --status-draft-bg:#27272A;
  --status-edited-fg:#93B4FF; --status-edited-bg:#1C2A4A;
  --status-locked-fg:#06210F; --status-locked-bg:#16A34A;

  --confidence-high-fg:#4ADE80; --confidence-high-bg:#0F2A18;
  --confidence-medium-fg:#FBBF24; --confidence-medium-bg:#2E2207;
  --confidence-low-fg:#FB923C; --confidence-low-bg:#2E1A0B;
  --confidence-verify-fg:#F87171; --confidence-verify-bg:#2E1212;

  --finding-pain-fg:#FB7185; --finding-pain-bg:#2E1119;
  --finding-requirement-fg:#93B4FF; --finding-requirement-bg:#11203F;
  --finding-decision-fg:#C4A8FB; --finding-decision-bg:#22153D;
  --finding-constraint-fg:#FBBF24; --finding-constraint-bg:#2E2207;
  --finding-risk-fg:#FB923C; --finding-risk-bg:#2E1A0B;
  --finding-insight-fg:#2DD4BF; --finding-insight-bg:#0C2826;
  --finding-question-fg:#67E8F9; --finding-question-bg:#0B2A31;
  --finding-conflict-fg:#F472B6; --finding-conflict-bg:#2E1122;

  --scope-variant-fg:#2DD4BF; --scope-variant-bg:#0C2826;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.5);
  --shadow-float:0 1px 2px rgba(0,0,0,.5),0 12px 36px rgba(0,0,0,.55);
}

/* ---- Alternate base tone: "Cool" (porcelain light / slate dark) ----
   Only the neutral base + button neutrals shift; every semantic token
   (status, confidence, finding, scope-variant, brand) is unchanged.
   Order matters: dark-cool must follow light-cool to win on equal specificity. */
:root[data-palette="cool"] {
  --bg-canvas:#F3F5F7; --bg-surface:#FFFFFF; --bg-subtle:#EAEEF2; --bg-hover:#E2E7EE;
  --border-subtle:#E3E7ED; --border-default:#D4DAE3;
  --text-primary:#191C21; --text-secondary:#5B616B; --text-tertiary:#9197A1;
  --btn-secondary-bg:#EAEEF2; --btn-secondary-border:#D4DAE3;
}
[data-theme="dark"][data-palette="cool"] {
  --bg-canvas:#0E1116; --bg-surface:#171B22; --bg-subtle:#1E232B; --bg-hover:#272D38;
  --border-subtle:#262C35; --border-default:#353D49;
  --text-primary:#E9EBEF; --text-secondary:#9BA2AD; --text-tertiary:#6A717C;
  --btn-secondary-bg:#272D38; --btn-secondary-border:#353D49;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin:0; background:var(--bg-canvas); color:var(--text-primary);
  font-family:var(--font-sans); font-size:var(--text-base);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---- shared type helpers ---- */
.mono { font-family:var(--font-mono); font-variant-ligatures:none; }
.eyebrow {
  font-family:var(--font-sans); font-size:var(--text-xs); line-height:1.3;
  letter-spacing:.06em; text-transform:uppercase; font-weight:500; color:var(--text-tertiary);
}
::selection { background: color-mix(in oklab, var(--brand-accent) 26%, transparent); }
:focus-visible { outline:2px solid color-mix(in oklab, var(--accent) 70%, transparent); outline-offset:2px; }