:root {

    /* — COLOUR PALETTE — */
    /* Adjust these and everything on the site updates */
  
    --color-primary:       #3333FF;   /* primary brand */
    --color-primary-hover: #1F1FFF;   /* primary hover */
    --color-cta:           var(--color-primary);
    --color-success:       #22C55E;
    --color-error:         #EF4444;

    --color-bg:            #F8FAFC;   /* page background */
    --color-surface:       #FFFFFF;   /* cards and elevated surfaces */
    --color-section-alt:   #EEF2F7;   /* alternate sections */

    --color-ink:           #1F2937;   /* primary text */
    --color-muted:         #6B7280;   /* secondary text */
    --color-border:        #E2E8F0;
    --color-shadow:        rgb(31 41 55 / 0.06);
    --color-overlay:       rgb(31 41 55 / 0.5);
    --shadow-header:       0 2px 16px var(--color-shadow);
  
  
    /* — TYPOGRAPHY — */
  
    --font-display:  'Roboto', sans-serif; /* headings and logo */
    --font-body:     'Roboto', sans-serif; /* body and UI */
  
    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-md:   17px;
    --text-lg:   22px;
    --text-xl:   28px;
    --text-2xl:  34px;
    --text-3xl:  42px;
  
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-bold:    700;
  
    --leading-tight:  1.2;
    --leading-body:   1.75;
    --leading-snug:   1.5;
  
  
    /* — 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;
    --mobile-hero-top: var(--space-5);
  
  
    /* — LAYOUT — */
  
    --max-width:     1080px;
    --gutter:        32px;
    --header-height: 64px;
    --header-expanded-height: 112px;
    --nav-toggle-size: 30px;
    --nav-brand-expanded-size: calc(var(--text-2xl) + 4pt);
    --nav-brand-collapsed-size: calc(var(--text-md) + 2pt);
    --nav-brand-desktop-size: var(--text-2xl);
    --footer-brand-desktop-size: var(--text-xl);
  
  
    /* — BORDERS & RADIUS — */
  
    --border-width:  0.5px;
    --radius-sm:     6px;
    --radius-md:     8px;
    --radius-lg:     12px;
    --radius-xl:     16px;
    --radius-pill:   40px;
  
  
    /* — TRANSITIONS — */
  
    --transition-fast:   0.12s ease;
    --duration-base:     0.2s;
    --duration-header:   0.3s;
    --ease-header:       cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   var(--duration-base) ease;
    --transition-header: var(--duration-header) var(--ease-header);
    --nav-brand-expanded-scale: 2;
  }