/*
  Subject list:
  1. Salon name: QA2-01 Salon ea58037e
  2. Single dedicated stylist: Maya
  3. Haircuts: precisely 30 minutes
  4. Colour appointments: precisely 90 minutes
  5. Hours: daily 09:00 to 18:00 (540 min to 1080 min)
  6. Strict exclusivity constraint: Maya serves one guest at a time; no overlapping slots allowed
  7. Adjacency rule: instant back-to-back booking is welcomed at the exact minute the prior finish happens
  8. Materials & tools: shears, mixing bowls, tint brush, linen wraps, warm natural timber, clean slate
  9. Paper artifacts: appointment appointment ledger, client docket, mirror timetable

  Idea sentence:
  On this site, the physical daily salon ledger and mirror schedule become an interactive timeline where slots snap cleanly to Maya's exact 30 and 90-minute blocks without overlap.

  Palette:
  - Ground: #faf8f5 (warm paper ground)
  - Ink: #1f1d1a (deep espresso black)
  - Accent: #9c4a2f (burnt terracotta / auburn dye tint)
  - Tint: #f0ebe4 (soft parchment card)
  - Subtle ink: #6b645c (warm slate grey for secondary text)
  - Muted line: #ded7ce (gentle divider)
*/

:root {
  --color-ground: #faf8f5;
  --color-ink: #1f1d1a;
  --color-accent: #9c4a2f;
  --color-tint: #f0ebe4;
  --color-ink-subtle: #6b645c;
  --color-edge: #ded7ce;
  --color-error-bg: #fae8e5;
  --color-error-ink: #851b14;
  --color-success-bg: #e8f4ec;
  --color-success-ink: #165b2e;

  --font-display: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', Cambria, serif;
  --font-body: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', sans-serif;

  --text-hero: clamp(2rem, 4vw + 1rem, 3.25rem);
  --text-title: clamp(1.4rem, 2vw + 0.8rem, 2rem);
  --text-section: 1.15rem;
  --text-body: 1rem;
  --text-caption: 0.875rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius: 0px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-ground);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}