:root {
  /* Colors */
  --color-primary: #236ffa;
  --color-accent: #ea187e;
  --color-hero-bg: #04182c;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --color-pink: #fb0853;
  --color-gold: #bd995b;
  --color-orange-yellow: #f6c672;
  --color-pearl-grey: #868686;
  --color-button: #bd995b;
  --color-button-hover: #fb0853;

  /* Spacing — 4px grid */
  --spacing-0: 0;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-45: 45px;
  --spacing-50: 50px;
  --spacing-64: 64px;

  /* Radius */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-25: 25px;
  --radius-full: 9999px;

  /* Typography — ALSStory (Angular home) + Onest fallback */
  --font-family: "ALSStory", "Onest", Helvetica, Arial, sans-serif;
  --font-family-bold: "ALSStory-Bold", "Onest", Helvetica, Arial, sans-serif;

  /* Layout */
  --container-max: 1390px;
  --container-pad: 45px;
  --container-pad-md: 30px;
  --container-pad-sm: 20px;
}