:root {
  /* Brand Colours */
  --chtti-blue:    #1A56C4;
  --chtti-purple:  #6B35B0;
  --chtti-orange:  #E8591C;
  --chtti-teal:    #0D7C6E;
  --chtti-dark:    #1A1A2E;
  --chtti-light:   #E8F0FB;
  --chtti-gray:    #F5F5F5;
  --chtti-white:   #FFFFFF;

  /* Typography */
  --font-display:  'Playfair Display', serif;
  --font-body:     'DM Sans', sans-serif;

  /* Type Scale */
  --text-hero:     clamp(56px, 6vw, 72px);
  --text-h1:       clamp(40px, 4vw, 48px);
  --text-h2:       clamp(28px, 3vw, 36px);
  --text-h3:       clamp(20px, 2vw, 24px);
  --text-body-lg:  18px;
  --text-body:     16px;
  --text-small:    14px;
  --text-caption:  13px;
  --text-button:   15px;

  /* Line Heights */
  --lh-hero:       1.1;
  --lh-heading:    1.2;
  --lh-subheading: 1.3;
  --lh-card:       1.4;
  --lh-body:       1.7;
  --lh-small:      1.5;

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

  /* Layout */
  --max-width:     1200px;
  --gutter:        24px;
  --section-pad-desktop: 80px;
  --section-pad-mobile:  48px;
  --card-pad:      28px;

  /* Border Radius */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-full:   9999px;

  /* Shadows */
  --shadow-card:        0 2px 16px rgba(26, 86, 196, 0.10);
  --shadow-card-hover:  0 8px 32px rgba(26, 86, 196, 0.18);
  --shadow-nav:         0 1px 0 rgba(0, 0, 0, 0.08);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-med:  300ms ease;
  --transition-slow: 600ms ease;
}