/* ============================================================
   Vector 4 — Design Tokens
   Brand Guidelines V01 / 2026 — source of truth
   ============================================================ */

:root {
  /* ── Colour ─────────────────────────────────────────────── */
  --color-blue:   #669ACC;   /* Cornflower Blue   — PRIMARY   */
  --color-black:  #000000;   /* Signal Black      — FOUNDATION*/
  --color-lime:   #F0FE47;   /* Electric Chartreuse — ACCENT  */
  --color-white:  #FFFFFF;   /* Paper White       — NEUTRAL   */

  /* Semantic aliases */
  --bg:              var(--color-black);
  --bg-surface:      rgba(255, 255, 255, 0.03);
  --bg-surface-hover:rgba(255, 255, 255, 0.06);
  --accent:          var(--color-lime);
  --accent-on-dark:  var(--color-blue);
  --text:            var(--color-white);
  --text-muted:      rgba(255, 255, 255, 0.5);
  --text-on-accent:  var(--color-black);
  --border:          rgba(255, 255, 255, 0.08);
  --border-hover:    rgba(240, 254, 71, 0.35);

  /* ── Typography ─────────────────────────────────────────── */
  --font-display:  'Bricolage Grotesque', sans-serif;
  --font-body:     'Hanken Grotesk', sans-serif;

  --tracking-tight:  -0.02em;   /* display / headlines */
  --tracking-wide:    0.1em;    /* labels / caps        */

  /* Fluid type scale */
  --fs-display: clamp(2.75rem, 7vw,   5.5rem);
  --fs-h1:      clamp(2rem,    5vw,   3.75rem);
  --fs-h2:      clamp(1.5rem,  3vw,   2.5rem);
  --fs-h3:      clamp(1.125rem,2vw,   1.5rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  --fs-label:   0.6875rem;

  /* ── Spacing ─────────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-w:        1280px;
  --max-w-text:   680px;
  --nav-h:        4rem;
  --section-pad:  clamp(4rem, 8vw, 7rem);
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);

  /* ── Radii ───────────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   450ms;
}