/* =================================
   BRAND DESIGN TOKENS
   ================================= */

:root {

  /* ===============================
     FONT SYSTEM
     =============================== */

  --font-primary: "Montserrat", sans-serif;

  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Typography Scale (Poster Optimised) */
  --title-xl: 140px;
  --title-lg: 96px;
  --title-md: 72px;

  --body-lg: 64px;
  --body-md: 54px;
  --body-sm: 42px;

  --letter-tight: -0.02em;
  --letter-normal: 0em;
  --letter-wide: 0.03em;


  /* ===============================
     COLOUR SYSTEM
     =============================== */

  /* Primary System */
  --brand-base: #123a5a;
  --deep-anchor: #0b1f33;
  --action-primary: #33afd3;
  --energy-primary: #20d6d1;

  /* Accent System */
  --accent-purple: #9131e1;
  --accent-pink: #e6007a;
  --accent-orange: #ff8a00;

  /* Neutral System */
  --ui-light: #f5f7fa;
  --ui-grey: #9aa4b2;


  /* ===============================
     LAYOUT TOKENS
     =============================== */

  /* Poster Dimensions (A4 @ 600 DPI) */
  --poster-width: 4961px;
  --poster-height: 7016px;

  /* Spacing Scale */
  --space-xl: 120px;
  --space-lg: 80px;
  --space-md: 60px;
  --space-sm: 40px;
  --space-xs: 24px;

  /* Radius Scale */
  --radius-lg: 40px;
  --radius-md: 36px;
  --radius-sm: 20px;

}