/* =============================================================
   DESIGN TOKENS — Single source of truth for the entire site.
   Edit here to restyle everything at once.
   ============================================================= */

:root {

  /* --- Colours --- */
  --clr-bg:          #09090f;
  --clr-bg-raised:   #111119;
  --clr-bg-overlay:  #1a1a26;
  --clr-accent:      #d4ff00;        /* neon lime — primary CTA */
  --clr-accent-dim:  rgba(212,255,0,.12);
  --clr-danger:      #ff3c5f;
  --clr-text:        #e6e6f0;
  --clr-text-muted:  #7a7a96;
  --clr-border:      rgba(255,255,255,.07);
  --clr-border-hover:rgba(212,255,0,.35);

  /* --- Typography --- */
  --ff-display: 'Bebas Neue', sans-serif;
  --ff-body:    'Barlow', sans-serif;

  --fs-xs:   0.6875rem;   /* 11px */
  --fs-sm:   0.8125rem;   /* 13px */
  --fs-base: 1rem;        /* 16px */
  --fs-lg:   1.125rem;    /* 18px */
  --fs-xl:   1.375rem;    /* 22px */
  --fs-2xl:  1.75rem;     /* 28px */
  --fs-3xl:  2.25rem;     /* 36px */
  --fs-4xl:  clamp(2.5rem, 6vw, 4rem);
  --fs-hero: clamp(4rem, 11vw, 8rem);

  --fw-light:   300;
  --fw-regular: 400;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight:  1;
  --lh-snug:   1.25;
  --lh-normal: 1.65;
  --lh-loose:  1.85;

  /* --- Spacing scale (multiples of 4px) --- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* --- Layout --- */
  --max-w:         1280px;
  --max-w-text:    680px;
  --px:            clamp(1rem, 3vw, 2rem);     /* horizontal page padding */
  --header-h:      64px;
  --ticker-h:      34px;  /* ticker disabled — re-enable in HTML to use this */
  --chrome-h:      var(--header-h); /* set back to calc(var(--header-h) + var(--ticker-h)) if ticker re-enabled */

  /* --- Shape --- */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;

  /* --- Shadow --- */
  --shadow-sm:  0 2px 8px  rgba(0,0,0,.4);
  --shadow-md:  0 8px 32px rgba(0,0,0,.6);
  --shadow-lg:  0 16px 64px rgba(0,0,0,.8);
  --shadow-glow:0 0 40px   rgba(212,255,0,.2);

  /* --- Transitions --- */
  --ease:       cubic-bezier(.4,0,.2,1);
  --t-fast:     120ms var(--ease);
  --t-base:     220ms var(--ease);
  --t-slow:     400ms var(--ease);
}