/*
  ClearNest Design Plan
  1. Business: ClearNest — small home cleaning service
  2. Location & Vibe: Residential neighbourhood, airy interiors, fresh linen, citrus & cedar
  3. Materials: Natural cotton cloths, warm oak floors, glass, ceramic, botanical soaps
  4. Numbers: 4 distinct cleaning services, clear arrival windows, transparent booking
  5. Rituals: Morning key exchange, dusting top-to-bottom, fresh bed turn-down, final inspection
  6. Constraints: No surprises, zero duplicate bookings, verified persistence
  7. Printed things: Neat checklist card left on the kitchen counter, reference slip
  8. Design idea: On this site, the crisp room-by-room inspection slip becomes the structured request card and verification ledger.
  9. Bold element: A solid warm-cedar and spruce confirmation banner with a stamped reference badge.
*/

:root {
  /* 6 deliberate role colours */
  --color-ground: #fbf9f5;
  --color-surface: #ffffff;
  --color-surface-soft: #f4efe6;
  --color-ink: #1f2520;
  --color-accent: #1e5644;
  --color-warm-wood: #8f532a;

  /* Derived shades */
  --color-ink-muted: color-mix(in oklch, var(--color-ink) 70%, transparent);
  --color-ink-faint: color-mix(in oklch, var(--color-ink) 25%, transparent);
  --color-accent-soft: color-mix(in oklch, var(--color-accent) 12%, transparent);
  --color-accent-hover: color-mix(in oklch, var(--color-accent) 85%, black);
  --color-border: color-mix(in oklch, var(--color-ink) 12%, transparent);
  --color-danger-bg: #fff1f0;
  --color-danger-ink: #8a1f1d;
  --color-success-bg: #eaf5ee;
  --color-success-ink: #164e32;

  /* Typography */
  --font-display: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --font-body: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;

  --text-hero: clamp(2rem, 4vw + 1rem, 3.25rem);
  --text-h2: clamp(1.5rem, 2.5vw + 0.5rem, 2.2rem);
  --text-h3: 1.25rem;
  --text-body: 1.05rem;
  --text-small: 0.88rem;

  /* Spacing (4px base) */
  --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;
  --space-16: 64px;

  /* Corner decision: crisp square architecture */
  --radius-none: 0px;
  --radius-subtle: 4px;
}

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

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

html {
  background-color: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-ground);
  color: var(--color-ink);
  caret-color: var(--color-accent);
  accent-color: var(--color-accent);
}

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