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

:root {
  /* ── Brand Colors ── */
  --color-lime           : #C8FF00;
  --color-lime-dim       : rgba(200,255,0,0.12);
  --color-lime-hover     : #B3E600;
  --color-lime-glow      : 0 0 24px rgba(200,255,0,0.25);

  /* ── Backgrounds ── */
  --color-bg             : #080808;
  --color-surface        : #0F0F0F;
  --color-surface-raised : #161616;
  --color-surface-high   : #1E1E1E;
  --color-border         : #222222;
  --color-border-hover   : #383838;

  /* ── Text ── */
  --color-text-primary   : #F0F0F0;
  --color-text-secondary : #888888;
  --color-text-muted     : #444444;
  --color-text-on-lime   : #080808;

  /* ── Semantic ── */
  --color-gold           : #D4A843;
  --color-silver         : #8A9BAE;
  --color-bronze         : #A1887F;

  /* ── Overlays ── */
  --overlay-dark         : rgba(8,8,8,0.75);
  --overlay-lime         : rgba(200,255,0,0.06);

  /* ── Typography ── */
  --font-heading : 'Space Grotesk', sans-serif;
  --font-body    : 'Inter', sans-serif;

  --text-xs   : 0.75rem;
  --text-sm   : 0.875rem;
  --text-base : 1rem;
  --text-lg   : 1.125rem;
  --text-xl   : 1.25rem;
  --text-2xl  : 1.5rem;
  --text-3xl  : 1.875rem;
  --text-4xl  : 2.25rem;
  --text-5xl  : 3rem;
  --text-6xl  : 4rem;
  --text-7xl  : 5rem;
  --text-hero : 6.5rem;

  --fw-light    : 300;
  --fw-regular  : 400;
  --fw-medium   : 500;
  --fw-semibold : 600;
  --fw-bold     : 700;

  --lh-tight  : 1.0;
  --lh-snug   : 1.15;
  --lh-normal : 1.6;
  --lh-loose  : 1.8;

  --ls-tight  : -0.03em;
  --ls-normal : -0.01em;
  --ls-wide   : 0.06em;
  --ls-wider  : 0.12em;

  /* ── Spacing ── */
  --space-1  :  4px;
  --space-2  :  8px;
  --space-3  : 12px;
  --space-4  : 16px;
  --space-5  : 20px;
  --space-6  : 24px;
  --space-8  : 32px;
  --space-10 : 40px;
  --space-12 : 48px;
  --space-16 : 64px;
  --space-20 : 80px;
  --space-24 : 96px;
  --space-32 : 128px;

  --section-py-mobile  : 72px;
  --section-py-desktop : 112px;

  --container-max : 1280px;
  --container-px  : 24px;

  /* ── Border Radius ── */
  --radius-none : 0px;
  --radius-sm   : 3px;
  --radius-md   : 6px;
  --radius-lg   : 12px;
  --radius-xl   : 20px;
  --radius-full : 9999px;

  /* ── Shadows ── */
  --shadow-sm : 0 2px 8px rgba(0,0,0,0.5);
  --shadow-md : 0 4px 24px rgba(0,0,0,0.6);
  --shadow-lg : 0 8px 48px rgba(0,0,0,0.7);

  /* ── Transitions ── */
  --transition-fast   : 120ms ease;
  --transition-base   : 220ms ease;
  --transition-slow   : 380ms ease;
  --transition-spring : 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}