/* Design tokens — White & Blue */
:root {
  /* Colours */
  --color-primary:    #1d40ab;
  --color-primary-dark: #1530a0;
  --color-primary-light: #EEF2FF;
  --color-on-primary: #ffffff;

  --color-surface:               #FFFFFF;
  --color-surface-container:     #F8F9FC;
  --color-surface-container-high:#F3F4F6;
  --color-surface-container-low: #FAFAFA;
  --color-surface-container-lowest: #FFFFFF;

  --color-on-surface:         #1A2B32;
  --color-on-surface-variant: #374151;
  --color-warm-grey:          #6B7280;
  --color-outline:            #9CA3AF;
  --color-outline-variant:    #E5E7EB;

  --color-whatsapp: #25D366;
  --color-error:    #ba1a1a;
  --color-gold:     #E9C349;

  --shadow-card:    0 10px 30px -8px rgba(29,64,171,0.10);
  --shadow-hover:   0 16px 36px -10px rgba(29,64,171,0.18);

  /* Typography */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  /* Font sizes */
  --text-display-hero: 64px;
  --text-headline-lg: 40px;
  --text-headline-lg-mobile: 32px;
  --text-headline-md: 32px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-label: 14px;

  /* Spacing (8px grid) */
  --spacing-unit: 8px;
  --spacing-stack-sm: 8px;
  --spacing-stack-md: 16px;
  --spacing-stack-lg: 24px;
  --spacing-gutter: 32px;
  --spacing-margin-mobile: 16px;
  --spacing-section-gap-lg: 120px;
  --spacing-section-gap-sm: 64px;

  /* Layout */
  --container-max: 1280px;

  /* Borders & shapes */
  --radius-card: 1.5rem;
  --radius-button: 9999px;
  --border-card: 1px solid #E5E7EB;
  --shadow-card: 0 10px 30px -8px rgba(29,64,171,0.08);
  --shadow-hover: 0 16px 36px -10px rgba(29,64,171,0.16);
}