/* ============================================================
   AI Tower — Design Tokens (Refined)
   All custom properties are namespaced --ait-* to avoid
   collisions with Bootstrap / plugin styles on the live site.
   Drop this file first, before ait-components.css.

   Source of truth: docs/design-system/css/ait-tokens.css
   Deviations from the source (see docs/handover/00-implementation-map.md):
   - @font-face blocks for self-hosted Hanken Grotesk prepended (doc 04).
   - @font-face for self-hosted Orbitron added (Phase 4).
   - The @media (prefers-color-scheme: dark) auto-dark block is removed
     so the explicit toggle (js/theme-toggle.js) always wins.
   ============================================================ */

@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/hanken/HankenGrotesk-Regular.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/hanken/HankenGrotesk-Medium.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/hanken/HankenGrotesk-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/hanken/HankenGrotesk-Bold.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/hanken/HankenGrotesk-ExtraBold.woff2") format("woff2")}

/* Orbitron — the .ait-brand wordmark only. Variable file covering 400-900 in
   11.8 KB, which is less than one static Hanken face. Declaring the full range
   matters: the wordmark asks for weight 800, and the Google Fonts <link> this
   replaces only ever delivered 400, so the browser was synthesising a faux
   bold. This gives it the real one. */
@font-face{font-family:"Orbitron";font-style:normal;font-weight:400 900;font-display:swap;src:url("../fonts/orbitron/Orbitron-Variable.woff2") format("woff2")}

:root {
  /* ---- Surfaces & lines (light) ---- */
  --ait-bg: #FBFBFC;          /* page background */
  --ait-hero: #F4F6F9;        /* hero / banded section background */
  --ait-surface: #FFFFFF;     /* cards, nav */
  --ait-surface-2: #F5F7FA;   /* insets, chips, subtle fills */
  --ait-line: #E7EBF0;        /* hairline borders, dividers */
  --ait-line-2: #DBE1E9;      /* stronger borders, control outlines */

  /* ---- Ink (text) ---- */
  --ait-ink: #15233E;         /* primary text / headings */
  --ait-ink-soft: #5A6473;    /* body copy, secondary text */
  --ait-ink-faint: #94A0B0;   /* meta, captions, muted labels */

  /* ---- Brand ---- */
  --ait-navy: #15233E;        /* logo bars, solid dark buttons, footer */
  --ait-accent: #16A36A;      /* primary brand green — links, CTAs, active */
  --ait-accent-soft: #E5F6EE; /* tinted accent backgrounds */

  /* ---- Extended palette (data viz, category hues, footer gradient) ---- */
  --ait-lime: #A5D817;
  --ait-teal: #1B7F8E;
  --ait-blue: #2563C9;
  --ait-violet: #7C5CD6;

  /* ---- On-accent / on-dark text ---- */
  --ait-on-accent: #FFFFFF;
  --ait-on-navy: var(--ait-bg);

  /* ---- Radius ---- */
  --ait-radius: 14px;         /* cards, media */
  --ait-radius-sm: 11px;      /* tiles, small controls */
  --ait-radius-pill: 100px;   /* pills, chips, round buttons */

  /* ---- Elevation ---- */
  --ait-shadow: 0 1px 2px rgba(21,35,62,.04), 0 14px 40px -22px rgba(21,35,62,.22);
  --ait-shadow-focus: 0 0 0 4px var(--ait-accent-soft);

  /* ---- Type ---- */
  --ait-font-sans: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ait-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ait-weight-regular: 400;
  --ait-weight-medium: 500;
  --ait-weight-semibold: 600;
  --ait-weight-bold: 700;
  --ait-weight-black: 800;

  /* Fluid type scale (clamp: min → preferred → max) */
  --ait-fs-display: clamp(36px, 5.4vw, 62px);  /* hero H1 */
  --ait-fs-h2: clamp(24px, 3.2vw, 38px);       /* section heads */
  --ait-fs-h3: 22px;                            /* sub-heads, sidebar titles */
  --ait-fs-title: 17px;                         /* card titles */
  --ait-fs-lead: 18px;                          /* hero sub, article lead */
  --ait-fs-body: 16px;                          /* body copy */
  --ait-fs-sm: 14px;                            /* meta, controls */
  --ait-fs-xs: 12.5px;                          /* fine print, tags */
  --ait-fs-eyebrow: 13px;                       /* eyebrow / kicker */
  --ait-fs-micro: 11px;                         /* uppercase micro-labels */

  --ait-ls-tight: -.025em;    /* display / headings */
  --ait-ls-snug: -.01em;      /* card titles */
  --ait-ls-wide: .06em;       /* uppercase labels */
  --ait-ls-wider: .1em;       /* footer col headings */

  --ait-lh-tight: 1.05;       /* display */
  --ait-lh-snug: 1.24;        /* card titles */
  --ait-lh-body: 1.55;        /* body */
  --ait-lh-relaxed: 1.65;     /* long-form article */

  /* ---- Layout ---- */
  --ait-container: 1180px;    /* max content width */
  --ait-gutter: 32px;         /* container side padding */
  --ait-gutter-sm: 28px;      /* container side padding below 768px.
                                 Keep >= 24px: `.row.g-5` (home-leaderboards,
                                 stats-display) carries -24px side margins and
                                 will overflow a narrower gutter. */
  --ait-section-y: 60px;      /* vertical rhythm between sections */

  /* ---- Spacing scale (4px base) ---- */
  --ait-space-1: 4px;
  --ait-space-2: 8px;
  --ait-space-3: 12px;
  --ait-space-4: 16px;
  --ait-space-5: 20px;
  --ait-space-6: 24px;
  --ait-space-8: 32px;
  --ait-space-10: 40px;
  --ait-space-12: 48px;

  /* ---- Motion ---- */
  --ait-ease: cubic-bezier(.2,.7,.3,1);
  --ait-dur-fast: .16s;
  --ait-dur: .2s;
  --ait-dur-slow: .4s;

  /* ---- Hexagon canvases (RGB triplets; JS composes per-frame alpha) ---- */
  --ait-hex-line: 120, 130, 145;
  --ait-hex-dot: 100, 110, 125;

  /* ---- Semantic: negative trend (added for leaderboard deltas) ---- */
  --ait-down: #C0453E;
}

/* ============================================================
   Dark theme — set on <html data-theme="dark">
   Flipped by js/theme-toggle.js (persisted in localStorage
   under 'ait-theme'); a no-flash snippet in header.php applies
   the stored value before first paint.
   ============================================================ */
html[data-theme="dark"] {
  --ait-bg: #0E1219;
  --ait-hero: #121723;
  --ait-surface: #161B26;
  --ait-surface-2: #1B212E;
  --ait-line: #242B38;
  --ait-line-2: #2E3645;

  --ait-ink: #EEF2F8;
  --ait-ink-soft: #A4AFBF;
  --ait-ink-faint: #6C7889;

  --ait-navy: #EEF2F8;        /* logo/text flips light on dark */
  --ait-accent: #3FD58F;      /* brightened for dark contrast */
  --ait-accent-soft: #10261C;
  /* Deviation from docs/design-system: the accent brightens in dark mode, so
     white text on it drops to 1.89:1. Ink on the same green is 8.29:1. */
  --ait-on-accent: #10261C;

  --ait-lime: #BCEE45;
  --ait-teal: #3FC0D0;
  --ait-blue: #6EA0FF;
  --ait-violet: #A88CF0;

  --ait-shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 50px -22px rgba(0,0,0,.6);

  --ait-hex-line: 132, 145, 168;
  --ait-hex-dot: 112, 125, 148;

  --ait-down: #E06A63;
}