:root {
  /* ── Colours ─────────────────────────────────────────── */
  --color-primary:        #1C2B3A;
  --color-primary-dark:   #111d27;
  --color-primary-light:  #2d4455;

  --color-accent:         #0D9488;
  --color-accent-dark:    #0a7567;
  --color-accent-light:   #5EEAD4;
  --color-accent-subtle:  rgba(13, 148, 136, 0.10);

  --color-white:          #FFFFFF;
  --color-surface:        #F8FAFC;
  --color-surface-2:      #F1F5F9;
  --color-border:         #E2E8F0;
  --color-border-dark:    #CBD5E1;

  --color-text-primary:   #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted:     #94A3B8;

  --color-success:        #10B981;
  --color-error:          #EF4444;

  /* ── Typography ──────────────────────────────────────── */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   1.25rem;    /* 20px */
  --fs-2xl:  1.5rem;     /* 24px */
  --fs-3xl:  1.875rem;   /* 30px */
  --fs-4xl:  2.25rem;    /* 36px */
  --fs-5xl:  3rem;       /* 48px */
  --fs-6xl:  3.75rem;    /* 60px */
  --fs-7xl:  4.5rem;     /* 72px */

  --lh-tight:   1.2;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --ls-tight:   -0.025em;
  --ls-normal:   0;
  --ls-wide:     0.025em;
  --ls-wider:    0.05em;
  --ls-widest:   0.12em;

  /* ── Spacing ─────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  1.75rem;
  --sp-8:  2rem;
  --sp-9:  2.25rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Border Radius ───────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius:      0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow:        0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md:     0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);
  --shadow-lg:     0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.05);
  --shadow-xl:     0 32px 64px rgba(0,0,0,0.15);
  --shadow-accent: 0 8px 32px rgba(13, 148, 136, 0.25);

  /* ── Transitions ─────────────────────────────────────── */
  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:          150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t:               250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:          400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ──────────────────────────────────────────── */
  --container-max:     1200px;
  --container-padding: var(--sp-6);
  --nav-height:        72px;
}

@media (max-width: 768px) {
  :root {
    --container-padding: var(--sp-4);
    --nav-height:        64px;
    --fs-5xl: 2.5rem;
    --fs-6xl: 3rem;
    --fs-7xl: 3.25rem;
  }
}

@media (max-width: 480px) {
  :root {
    --fs-4xl: 2rem;
    --fs-5xl: 2.25rem;
    --fs-6xl: 2.5rem;
  }
}