/* Design tokens - palette sampled directly from the original brand, not
   invented. The red and gray come from averaging real pixels in the
   original logo (public/assets/clean/001 & 002); the ivory/blush values
   and the dark charcoal ink come from actual hex colors found inline in
   the retrieved (inert, never-executed) HTML of all 17 pages - see
   docs/design-system.md for the sampling method. No warm "brown" appears
   anywhere in that real data - that was this project's own early misstep,
   echoing the generic Marvelous-Beauty-style brief instead of the actual
   site, and has been removed. */
:root {
  /* Color */
  --color-ivory: #F6EBE7;
  --color-beige: #E0CEC2;
  --color-blush: #EDDBDB;
  --color-sand: #E8D8CC;
  --color-red: #AD1E13;
  --color-red-deep: #7A140C;
  --color-gray-brand: #727272;
  --color-ink: #2A2E32;
  --color-ink-deep: #1B1E21;
  --color-text-muted: #63696E;
  --color-white: #FFFFFF;
  --color-hairline: rgba(50, 55, 60, 0.14);
  --color-focus: var(--color-red);

  --color-bg: var(--color-ivory);
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-sand);
  --color-text: var(--color-ink);

  /* Type */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", Arial, Helvetica, sans-serif;

  --size-hero: clamp(2.1rem, 1.7rem + 2.6vw, 3.75rem);
  --size-section-heading: clamp(1.4rem, 1.2rem + 1.3vw, 2.1rem);
  --size-subsection-heading: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem);
  --size-body: 1rem;
  --size-eyebrow: 0.78rem;
  --line-body: 1.7;
  --tracking-eyebrow: 0.22em;

  /* Spacing */
  --space-section-desktop: 5.5rem;
  --space-section-tablet: 4rem;
  --space-section-mobile: 3.25rem;
  --content-max: 1240px;
  --content-max-wide: 1440px;
  --reading-max: 90ch;

  --radius-soft: 6px;
  --radius-pill: 999px;

  --shadow-soft: 0 12px 32px -18px rgba(42, 46, 50, 0.35);
  --transition-standard: 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-standard: 0ms;
  }
}