/* ============================================================
   Velocity Arena — Design Tokens
   Sourced from the Claude Design handoff (`colors_and_type.css`).
   Single source of truth. Imported by /style.css and applied
   site-wide outside of /activities/ and /lessons/.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* ---------- COLOR — backgrounds (layered navy) ---------- */
  --bg-0:#07101C;   /* deepest — page chrome, behind content */
  --bg-1:#0B1626;   /* default page background */
  --bg-2:#0F1D31;   /* card / panel surface */
  --bg-3:#15263E;   /* hover lift / nested surface */
  --bg-4:#1B3052;   /* highest — popovers, menus */

  /* ---------- COLOR — text ---------- */
  --fg-0:#F2F6FA;   /* primary */
  --fg-1:#B9C4D2;   /* secondary */
  --fg-2:#6E7E92;   /* tertiary, all-caps labels */
  --fg-3:#455367;   /* disabled, divider text */

  /* ---------- COLOR — lines ---------- */
  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.14);
  --line-cyan:rgba(0,229,255,0.32);

  /* ---------- COLOR — accent (single hero) ---------- */
  --accent:#00E5FF;
  --accent-bright:#3DECFF;
  --accent-deep:#00B4C9;
  --accent-ink:#001218;
  --accent-tint:rgba(0,229,255,0.10);

  /* ---------- COLOR — semantic state ---------- */
  --ok:#3DDC97;
  --warn:#FFC857;
  --error:#FF5D6C;
  --ok-tint:rgba(61,220,151,0.12);
  --warn-tint:rgba(255,200,87,0.12);
  --error-tint:rgba(255,93,108,0.12);

  /* ---------- TYPE — families ---------- */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;

  /* ---------- TYPE — base sizes (px) ---------- */
  --fs-display-xl:80px;
  --fs-display-l:56px;
  --fs-display-m:40px;
  --fs-h1:32px;
  --fs-h2:24px;
  --fs-h3:18px;
  --fs-body-l:16px;
  --fs-body:15px;
  --fs-body-s:13px;
  --fs-label:11px;
  --fs-mono:13px;

  /* ---------- TYPE — line height ---------- */
  --lh-tight:1.05;
  --lh-snug:1.15;
  --lh-normal:1.4;
  --lh-body:1.5;

  /* ---------- TYPE — tracking ---------- */
  --tr-display:-0.03em;
  --tr-heading:-0.02em;
  --tr-body:0;
  --tr-label:0.16em;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;
  --sp-9:96px;

  /* ---------- RADIUS ---------- */
  --r-sm:2px;
  --r-md:4px;
  --r-pill:999px;

  /* ---------- BORDERS ---------- */
  --bd:1px solid var(--line);
  --bd-strong:1px solid var(--line-strong);
  --bd-cyan:1px solid var(--line-cyan);

  --stripe-cyan:3px solid var(--accent);

  /* ---------- MOTION ---------- */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur-1:120ms;
  --dur-2:180ms;
  --dur-3:240ms;

  /* ============================================================
     LEGACY ALIASES — preserve existing rule selectors that
     reference --navy, --cyan, --slate, etc. Each old name now
     resolves to a token from the new system. Do not remove
     these until every reference is migrated.
     ============================================================ */
  --navy:var(--bg-1);
  --navy2:var(--bg-2);
  --navy3:var(--bg-3);
  --cyan:var(--accent);
  --teal:var(--accent-deep);
  --slate:var(--fg-1);
  --white:var(--fg-0);
  --body-bg:var(--bg-1);
  --text:var(--fg-0);
  --text-muted:var(--fg-2);
  --border:var(--line);
  --card-border:var(--line-strong);
  --card-bg:var(--bg-2);
}