/* Design tokens — Kapsalon De Meester. See /tmp/kapper-design.md for the full spec. */
:root {
  /* Colour */
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --surface-slate: #334155;
  --slate-900: #232B38;
  --text: #334155;
  --text-body: #3F4A5A;
  --text-on-slate: #FAF7F2;
  --text-on-slate-muted: #C7CFDA;
  --gold: #D4AF37;
  --gold-soft: #E7CD7A;
  --gold-ink: #8A6A1E;
  --line: #E4DCCB;
  --line-on-slate: rgba(250, 247, 242, 0.18);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;

  --size-display: clamp(2.5rem, 1.9rem + 3vw, 4.75rem);
  --size-h1: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --size-h2: clamp(1.625rem, 1.4rem + 1.1vw, 2.375rem);
  --size-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --size-body: clamp(1.0625rem, 1rem + 0.15vw, 1.125rem);
  --size-small: 0.875rem;
  --size-numeral: clamp(5rem, 3rem + 8vw, 11rem);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --section-pad: var(--space-9);

  /* Layout */
  --content: 1180px;
  --content-narrow: 820px;
  --prose: 70ch;

  /* Radius */
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-pill: 999px;
  --radius-arch: 140px;

  /* Shadow */
  --shadow-card: 0 1px 2px rgba(35, 43, 56, 0.06), 0 12px 32px -16px rgba(35, 43, 56, 0.18);
  --shadow-lift: 0 20px 48px -20px rgba(35, 43, 56, 0.28);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-s: 0.2s;
  --dur-m: 0.6s;
  --dur-l: 0.9s;
}