/* Summer House Salon: design tokens
   Brand palette + type + spacing. Values sourced from the live site CSS
   (see reference/scrape/INVENTORY.md). Confirm mauve + secondary shades visually.
   No raw hex/px in component CSS: use these tokens. */

:root {
  /* Brand colors */
  --color-primary: #2b5672;        /* deep teal-blue */
  --color-primary-dark: #1f3f55;   /* darker teal for hover (derived) */
  --color-accent: #ff8044;         /* warm orange */
  --color-cream: #fef6ed;          /* cream page/section background */
  --color-mist: #cdd9df;           /* light blue-grey */
  --color-mauve: #d5c3bf;          /* stylist-card bg (from live DevTools rgb(213,195,191)) */

  /* Neutrals / text (WCAG AA on light backgrounds) */
  --color-text: #000000;           /* site body text = font_8 color_15 #000 (live-confirmed) */
  --color-text-muted: #55606a;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-border: #e2e2e2;
  --color-on-primary: #ffffff;

  /* Typography */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Futura", "Century Gothic", -apple-system, "Segoe UI", sans-serif;
  --line-body: 1.5;
  --line-heading: 1.15;

  /* Type scale (~1.2 ratio, 16px base) */
  --fs-body: 1rem;         /* 16px */
  --fs-sm: 0.833rem;       /* ~13px labels/captions */
  --fs-lg: 1.2rem;         /* ~19px */
  --fs-h3: 1.44rem;        /* ~23px */
  --fs-h2: 1.728rem;       /* ~28px */
  --fs-h1: 2.986rem;       /* ~48px display */

  /* Spacing (8pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;

  /* Radius */
  --radius-sm: 6px;   /* buttons, inputs */
  --radius-md: 8px;   /* cards, panels */
  --radius-pill: 999px;

  /* Layout */
  --container: 1100px;
  --container-narrow: 800px;
  --breakpoint-mobile: 640px;

  /* Elevation */
  --shadow-card: 0 6px 20px rgba(43, 86, 114, 0.10);
}