/* ============================================================
   ApexQuant · colors_and_type.css
   Base tokens + semantic type/color styles for the design system.
   Source of truth: tokens.css (v4, 25 May 2026) + brand-rules.md.
   Font: Geist + Geist Mono only, ALWAYS with ss01 + cv11.
   ============================================================ */

/* ============================================================
   Brand fonts — Geist + Geist Mono, fully self-hosted from /fonts.
   @font-face declared inline (no CDN, no nested @import) so every
   consumer of this stylesheet resolves the real brand typefaces.
   Variable fonts cover the full 100–900 axis incl. the hero's 550.
   ============================================================ */
@font-face {
  font-family:'Geist'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/Geist-VariableFont_wght.woff2') format('woff2'),
      url('fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family:'Geist'; font-style:italic; font-weight:100 900; font-display:swap;
  src:url('fonts/Geist-Italic-VariableFont_wght.woff2') format('woff2'),
      url('fonts/Geist-Italic-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family:'Geist Mono'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/GeistMono-VariableFont_wght.woff2') format('woff2'),
      url('fonts/GeistMono-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family:'Geist Mono'; font-style:italic; font-weight:100 900; font-display:swap;
  src:url('fonts/GeistMono-Italic-VariableFont_wght.woff2') format('woff2'),
      url('fonts/GeistMono-Italic-VariableFont_wght.ttf') format('truetype-variations');
}

:root {
  /* ===== Surfaces ===== */
  --apex-night: #0C1428;   /* page background, behind every dark section */
  --navy-cta:   #0A1736;   /* final CTA box + text inside the light band */
  --light-bone: #F4F2E9;   /* light mid-page band (globe section) */
  --card-2:     #131D3F;   /* logo lockup box / raised card-2 surface */

  /* ===== Text ===== */
  --bone:      #F2F4F8;   /* all headings + primary copy on dark */
  --soft-grey: #C2C9D9;   /* sub-titles, 2nd H1 line, secondary text */
  --muted:     #68708A;   /* caption / eyebrow neutral */
  --dark-ink:  #0A1736;   /* text ONLY inside the light band */

  /* ===== Brand accent (ALWAYS solid — never gradient) ===== */
  --apex-blue:       #1E5BFF;  /* THE brand color: CTA, link, nav, highlight, brand eyebrow */
  --apex-blue-hover: #4A7DFF;  /* primary button hover (color change only) */
  --apex-blue-hi:    #5C82FF;  /* light blue for highlighted words on dark + hero light dots */
  --apex-blue-dark:  #1647CC;
  --no-red:          #EF4A3C;  /* the ✗ red for "what to avoid" / error state */
  --aurex-gold:      #C9A227;  /* Aurex product accent — Aurex pages only, never on home */
  --aurex-gold-hi:   #D5AE2E;  /* Aurex gold hover / highlight */
  --aurex-gold-dark: #A1801E;  /* Aurex button hover (dark gold) */
  --protocol-red:      #E1392B;  /* 10X Protocol product accent (Flip Red) — Protocol pages only */
  --protocol-red-hi:   #F65C4E;  /* 10X Protocol highlight on dark */
  --protocol-red-hover:#EF4D3F;  /* 10X Protocol button hover (lighter) */
  --protocol-red-dark: #B82A1E;  /* 10X Protocol deep red */
  --plasma:          #23E5C4;  /* positive signal (LIVE / VERIFIED) — use <1% */

  /* ===== Functional inline colors (used in site, outside token block) ===== */
  --star-gold:    #FBBF24;  /* gold trustline stars (default hero) */
  --star-gold-lt: #FBEFC6;  /* light gold stars in Aurex hero variant */
  --trustpilot:   #00B67A;  /* Trustpilot-style green squares */
  --avatar-bg:    #0F1A3A;  /* trustline avatar background */

  /* ===== Lines ===== */
  --hair:      rgba(255,255,255,0.08);  /* standard hairline (separators) */
  --card-line: rgba(255,255,255,0.06);  /* card inset border / outline */

  /* ===== Effects (the only 2 allowed) ===== */
  --glow: rgba(30,91,255,0.55);  /* ambient glow around ONE feature block (NEVER on buttons) */
  --halo: rgba(30,91,255,0.10);  /* ambient background halo */

  /* ===== Fonts ===== */
  --font: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  /* MANDATORY on body + all text: */
  --font-features: "ss01", "cv11";

  /* ===== Layout ===== */
  --container: 1240px;  /* grid for sections, navbar, footer (text 920 · narrow 650 · headline max 22ch) */
  --gutter:    56px;    /* desktop side margin → 40 (≤1279) → 24 (≤900) → 32 (≤767) → 20 (≤540) */
  --section-y: 96px;    /* vertical gap between sections → 72 (≤900). Hero: 176 top / 96 bottom */
  --ease: cubic-bezier(.2,.7,.2,1);  /* easing for all hover transitions */

  /* ===== Spacing scale (4px grid) — ONLY these values ===== */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-6: 24px;  --s-8: 32px;  --s-12: 48px; --s-16: 64px;
  --s-24: 96px; --s-36: 144px;
  /* never 18, never 27 */

  /* ===== Radii — FIXED per type (not elastic; do not grow with viewport).
           Concentric nesting: inner radius = outer radius − padding ===== */
  --r-chip:    3px;
  --r-badge:   4px;
  --r-input:   8px;
  --r-block:   8px;    /* block / announcement pill */
  --r-card-sm: 12px;   /* small card / cell */
  --r-card:    20px;   /* content card: reviews, features, stats (16–20) */
  --r-box:     28px;   /* large surface: modal, CTA box, full-width media */
  --r-pill:    999px;  /* buttons / controls; icons & badges = full circle */
}

/* ============================================================
   BASE — apply to body
   ============================================================ */
body {
  background: var(--apex-night);
  color: var(--bone);
  font-family: var(--font);
  font-feature-settings: var(--font-features);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================
   SEMANTIC TYPE STYLES
   Weights: section 500 · hero 550 · closer 600 · NEVER 700.
   Tracking always negative.
   ============================================================ */

/* Hero headline — 60 / 550 / -0.03em / 1.0 · max 22ch · keyword in product accent */
.t-hero {
  font-family: var(--font);
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 550;
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: 22ch;
  color: var(--bone);
  text-wrap: balance;
}

/* Closer (final CTA) — 38–60 / 600 / -0.032em / 1.04 — the ONLY 600 heading */
.t-closer {
  font-family: var(--font);
  font-size: clamp(38px, 5.5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.04;
  color: var(--bone);
  text-wrap: balance;
}

/* H2 section — 48 / 500 / -0.025em / 1.08 (mobile ~28–36) */
.t-h2, h2.sec {
  font-family: var(--font);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--bone);
  text-wrap: balance;
}

/* H3 — 28 / 500 / -0.025em / 1.15 */
.t-h3 {
  font-family: var(--font);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--bone);
}

/* H4 — 22 / 500 / -0.025em / 1.1 */
.t-h4 {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--bone);
}

/* Lede / sub-title — 18(hero)/17(general) / 400 / -0.005em / 1.45 · Soft Grey · max 650/54ch */
.t-lede {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.45;
  color: var(--soft-grey);
  max-width: 54ch;
  text-wrap: pretty;
}
.t-lede--hero { font-size: 18px; line-height: 1.55; }

/* Body — 16 / 400 / 1.55 */
.t-body {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--soft-grey);
  text-wrap: pretty;
}

/* Caption — 13 / 400 / 1.5 · Muted */
.t-caption {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

/* Eyebrow — Geist Mono 11 / 500 / .22em / UPPERCASE · Muted · TEXT ONLY, no marker */
.t-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.t-eyebrow--brand { color: var(--accent, var(--apex-blue)); }
.t-eyebrow--aurex { color: var(--aurex-gold); }
.t-eyebrow--protocol { color: var(--protocol-red); }

/* KPI — Geist 32 / 500 / -0.025em / 1.05 · tabular-nums */
.t-kpi {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}

/* Mono label — for numbers, tags, code-ish UI labels */
.t-mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Highlighted keyword inside a heading (brand color, solid — never gradient) */
.t-key { color: var(--accent-hi, var(--apex-blue-hi)); }
.t-key--aurex { color: var(--aurex-gold); }
.t-key--protocol { color: var(--protocol-red-hi); }

/* ============================================================
   BRAND THEMING — foundation layer.
   Apex (blue) is the base on :root. A product page/section opts in
   with [data-brand="protocol"|"aurex"] and the whole accent set
   re-pigments: solid accent (CTA / link / eyebrow / logo-A),
   hover, highlight word, background halo, star dots, the ink colour
   that sits ON the solid button, and the logo box ring.
   ============================================================ */
:root {
  --accent: var(--apex-blue); --accent-hover: var(--apex-blue-hover); --accent-hi: var(--apex-blue-hi);
  --accent-halo: rgba(30,91,255,0.16); --accent-dot: #5C82FF;
  --accent-ink: #fff; --accent-ring: rgba(30,91,255,0.55);
}
[data-brand="apex"] {
  --accent: var(--apex-blue); --accent-hover: var(--apex-blue-hover); --accent-hi: var(--apex-blue-hi);
  --accent-halo: rgba(30,91,255,0.16); --accent-dot: #5C82FF;
  --accent-ink: #fff; --accent-ring: rgba(30,91,255,0.55);
}
[data-brand="protocol"] {
  --accent: var(--protocol-red); --accent-hover: var(--protocol-red-hover); --accent-hi: var(--protocol-red-hi);
  --accent-halo: rgba(225,57,43,0.17); --accent-dot: #F76A5C;
  --accent-ink: #fff; --accent-ring: rgba(225,57,43,0.60);
}
[data-brand="aurex"] {
  --accent: var(--aurex-gold); --accent-hover: var(--aurex-gold-dark); --accent-hi: var(--aurex-gold-hi);
  --accent-halo: rgba(201,162,39,0.16); --accent-dot: #D5AE2E;
  --accent-ink: var(--apex-night); --accent-ring: rgba(201,162,39,0.60);
}