:root {
  /* Brand colours */
  --c-marine:    #14213D;
  --c-or:        #C9A227;
  --c-creme:     #F4EEE2;
  --c-encre:     #1C1A17;
  --c-hausse:    #2FA36B;
  --c-baisse:    #E05A4D;

  /* Alpha variants */
  --c-or-10:     rgba(201,162,39,.10);
  --c-or-20:     rgba(201,162,39,.20);
  --c-or-40:     rgba(201,162,39,.40);
  --c-marine-80: rgba(20,33,61,.80);
  --c-creme-70:  rgba(244,238,226,.70);
  --c-creme-30:  rgba(244,238,226,.30);

  /* Fonts */
  --f-display: 'Bricolage Grotesque', Georgia, serif;
  --f-body:    'Hanken Grotesk', system-ui, Arial, sans-serif;

  /* Spacing scale (rem) */
  --sp-2:  0.125rem;
  --sp-4:  0.25rem;
  --sp-8:  0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-20: 1.25rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-40: 2.5rem;
  --sp-48: 3rem;
  --sp-64: 4rem;
  --sp-96: 6rem;
  --sp-128:8rem;

  /* Border radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-full: 999px;

  /* Transitions */
  --t-fast:  180ms ease;
  --t-md:    350ms ease;
  --t-slow:  700ms cubic-bezier(0.16,1,0.3,1);
  --t-stamp: 900ms cubic-bezier(0.16,1,0.3,1);

  /* Shadows */
  --shadow-or:    0 0 0 1px var(--c-or-20), 0 4px 24px rgba(201,162,39,.15);
  --shadow-card:  0 2px 16px rgba(20,33,61,.12), 0 1px 4px rgba(20,33,61,.08);
  --shadow-dark:  0 8px 48px rgba(20,33,61,.40);

  /* Max widths */
  --max-w-text:   680px;
  --max-w-wide:   1140px;
  --max-w-narrow: 520px;
}