:root {
  /* ── Brand Colours ────────────────────────────────────────────── */
  --navy:         #1E3A5F;
  --navy-deep:    #0d1b2a;
  --navy-mid:     #2a4e7c;
  --navy-pale:    #e8eef5;
  --gold:         #C6A85A;
  --gold-light:   #d4b96a;
  --gold-dark:    #b8932e;
  --gold-pale:    #fef9f0;
  --cream:        #FAF7F2;
  --ivory:        #FAF7F2;    /* alias — dev uses --ivory, we use --cream */
  --parchment:    #F2EDE4;
  --parchment-2:  #EAE3D8;
  --white:        #ffffff;

  /* ── Ink / Text ───────────────────────────────────────────────── */
  --ink:          #1c2333;
  --ink-light:    #3d4658;
  --muted:        #6b7280;

  /* ── Borders ──────────────────────────────────────────────────── */
  --border:       #d8d2c8;
  --border-light: #e5e0d8;

  /* ── Feedback Colours ─────────────────────────────────────────── */
  --success:      #166534;
  --error:        #991B1B;

  /* ── Typography ───────────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Poppins', system-ui, sans-serif;
  --font-ui:      'Poppins', system-ui, sans-serif;  /* alias */

  /* ── Spacing — our system (--sp-N) ───────────────────────────── */
  --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-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;

  /* ── Spacing — developer system (--space-N) — kept for compatibility */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  /* ── Border Radius ────────────────────────────────────────────── */
  --r:        8px;
  --r-sm:     4px;
  --r-md:     12px;
  --r-lg:     16px;
  --r-xl:     24px;
  --r-pill:   999px;
  --r-full:   999px;   /* alias */
  --radius-sm:  4px;   /* dev aliases */
  --radius:     8px;
  --radius-lg:  16px;
  --radius-full: 999px;

  /* ── Shadows ──────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 3px rgba(26,26,24,.08), 0 1px 2px rgba(26,26,24,.04);
  --shadow-sm:  0 1px 3px rgba(26,26,24,.08), 0 1px 2px rgba(26,26,24,.04);
  --shadow:     0 4px 12px rgba(26,26,24,.10), 0 2px 4px rgba(26,26,24,.06);
  --shadow-md:  0 8px 24px rgba(26,26,24,.12), 0 4px 8px rgba(26,26,24,.06);
  --shadow-lg:  0 20px 48px rgba(26,26,24,.14), 0 8px 16px rgba(26,26,24,.08);

  /* ── Layout ───────────────────────────────────────────────────── */
  --max-w:        1200px;
  --max-w-narrow: 800px;
  --max-w-wide:   1400px;

  /* ── Motion ───────────────────────────────────────────────────── */
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1);
  --transition: 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── CSS Reset & Base ──────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; }

/* ── Typography ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 var(--sp-4);
}

h1 { font-size: clamp(2rem,    5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem,  3.5vw, 2.25rem); }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p { margin: 0 0 var(--sp-4); line-height: 1.75; }

em, i { font-style: italic; }

/* ── Focus styles ─────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── Selection ────────────────────────────────────────────────── */
::selection {
  background: rgba(198,168,90,.25);
  color: var(--navy);
}