/* ============================================================
   Klariqo — v3 brand system · "the Klariqo language"
   Clear · sharp · bright · confident. Clarity + Echo.
   Canonical token + primitive source. Every v3 page builds on this.
   (style-guide.html is the visual spec; this is the importable system.)
   ============================================================ */

:root {
  /* surfaces — bright, "klar" */
  --bg: #FEFEFE;
  --surface: #FFFFFF;
  --surface-2: #F5F7FA;
  --sunk: #EEF1F5;

  /* ink — cool near-black */
  --ink: #0F141A;
  --ink-soft: #565F6B;
  --ink-faint: #949CA8;
  --line: #E5E9EF;
  --line-strong: #D3D9E1;

  /* the one sharp accent — signal cyan (locked 2026-06-22) */
  --accent: #07AEC4;
  --accent-ink: #0A7E8F;

  /* semantics — crisp/bright */
  --verified: #15A35B;
  --flag: #E08A1E;
  --danger: #E0483B;

  --r-lg: 16px;
  --r: 10px;
  --r-sm: 7px;
  --maxw: 1280px;
  --h2: clamp(1.7rem, 3.1vw, 2.3rem);   /* canonical section-headline size (kept below the hero H1 for hierarchy) */
  --ease: cubic-bezier(.2,.7,.3,1);
  --display: "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* ── derived type / spacing / component tokens (v3 consolidation, 2026-06-24) ── */
  --h2-lh: 1.08;              /* section-headline line-height */
  --eyebrow-gap: 16px;       /* gap below an eyebrow before its headline */
  --section-y: 90px;         /* standard section vertical padding */
  --section-y-tight: 84px;
  --section-y-lg: 100px;
  --section-y-xl: 112px;
  --section-sub: 1.05rem;    /* section intro paragraph size */
  --section-sub-lh: 1.55;
  --card-h: 500px;           /* big image / feature card height */
  --card-title-lg: var(--h2);/* showcase image-overlay card title (verticals, featured blog lead) — title floats alone over an image */
  --card-title: 1.4rem;      /* unified content-card title (stakes, bento, hiw, vbento, resources) — title sits with a tag + body */
  --wide-image-max-h: 420px; /* full-bleed editorial image band */
  --btn-h: 46px; --btn-px: 22px; --btn-font: 14.5px;
  --btn-sm-h: 40px; --btn-sm-px: 16px;
  --nav-link-size: 14px;
  --footer-link-size: 13.5px;
  --on-image: #fff;                        /* text over a dark image scrim */
  --on-image-muted: rgba(255,255,255,.72);
  --scrim-strong: rgba(15,20,26,.94);
  --scrim-mid: rgba(15,20,26,.5);
  --scrim-faint: rgba(15,20,26,.12);
  --r-focus: 4px;
}

html.theme-dark {
  --bg: #0F141A;
  --surface: #19212B;
  --surface-2: #222B35;
  --sunk: #10151C;
  --ink: #EEF2F6;
  --ink-soft: #9BA6B2;
  --ink-faint: #6A737F;
  --line: #283039;
  --line-strong: #3A434F;
  --accent-ink: #14AEC4;
  background: var(--bg);
}

html.accent-blue   { --accent: #2D5BFF; --accent-ink: #1B3FCC; }  /* alternate, for gut-check */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-focus); }
@media (prefers-reduced-motion: reduce){ * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ── type primitives ── */
.eyebrow { font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 9px; }
.eyebrow .tick { width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.dsp { font-family: var(--display); font-weight: 400; letter-spacing: -0.03em; line-height: 1.02; }
.dsp .ac { color: var(--accent); }
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-soft); line-height: 1.55; }

/* ── buttons ── */
.btn { font-family: var(--body); font-weight: 600; font-size: var(--btn-font); letter-spacing: -0.01em; height: var(--btn-h); padding: 0 var(--btn-px); border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; transition: transform .25s var(--ease), background .2s, box-shadow .25s, border-color .2s; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-primary:hover { background: var(--accent-ink); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-ghost { background: var(--surface-2); color: var(--ink); }
.btn-ghost:hover { background: var(--sunk); transform: translateY(-2px); }
.btn-sm { height: var(--btn-sm-h); padding: 0 var(--btn-sm-px); }
.ar { transition: transform .25s var(--ease); }
.btn:hover .ar, .lnk:hover .ar { transform: translateX(3px); }
.lnk { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14.5px; color: var(--accent); }

/* ── badges / status ── */
.badge { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .05em; padding: 5px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid; }
.badge .dt { width: 7px; height: 7px; border-radius: 50%; }
.b-live { color: var(--verified); border-color: color-mix(in srgb,var(--verified) 40%, transparent); background: color-mix(in srgb,var(--verified) 9%, transparent); }
.b-live .dt { background: var(--verified); box-shadow: 0 0 0 3px color-mix(in srgb,var(--verified) 16%, transparent); }
.b-coming { color: var(--flag); border-color: color-mix(in srgb,var(--flag) 40%, transparent); background: color-mix(in srgb,var(--flag) 9%, transparent); }
.b-coming .dt { background: var(--flag); }
.b-witness { color: var(--accent); border-color: color-mix(in srgb,var(--accent) 40%, transparent); background: color-mix(in srgb,var(--accent) 8%, transparent); }
.b-fail { color: var(--danger); border-color: color-mix(in srgb,var(--danger) 40%, transparent); background: color-mix(in srgb,var(--danger) 8%, transparent); }

/* ── input ── */
.field { width: 100%; max-width: 360px; display: flex; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.field input { flex: 1; border: 0; background: transparent; padding: 0 15px; height: 46px; font-family: var(--body); font-size: 14.5px; color: var(--ink); }
.field input:focus { outline: none; }
.field .fb { border: 0; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; padding: 0 18px; cursor: pointer; }

/* ── hairline grid field (Conductor-style technical texture) ── */
.grid-field { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 34px 34px; }
.grid-field-fade { -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 75%); }

/* reveal helper for ScrollTrigger / fallback (visible by default = JS-off safe) */
.reveal { opacity: 1; }