/* ==========================================================================
   Design tokens — HairzoneStyle By Pikaru
   Colors are HSL triplets; use them as hsl(var(--token)) or hsl(var(--token) / .5).
   ========================================================================== */

:root {
  /* Semantic palette */
  --background: 35 30% 97%;
  --foreground: 25 15% 15%;
  --card: 35 25% 95%;
  --card-foreground: 25 15% 15%;
  --popover: 35 25% 95%;
  --popover-foreground: 25 15% 15%;
  --primary: 38 50% 50%;
  --primary-foreground: 35 30% 97%;
  --secondary: 30 20% 90%;
  --secondary-foreground: 25 15% 25%;
  --muted: 30 15% 88%;
  --muted-foreground: 25 10% 38%; /* spec 45% darkened to meet WCAG AA (≥4.5:1) on all light surfaces */
  --accent: 25 40% 85%;
  --accent-foreground: 25 15% 20%;
  --destructive: 0 65% 45%;
  --destructive-foreground: 35 30% 97%;
  --border: 30 15% 85%;
  --input: 30 15% 85%;
  --ring: 38 50% 50%;
  --radius: 0.5rem;

  /* Brand palette */
  --gold: 38 60% 55%;
  --gold-light: 38 50% 75%;
  --gold-dark: 38 55% 40%;
  --gold-text: 38 60% 32%; /* gold for small text: AA (≥4.5:1) on cream; --gold-dark stays decorative */
  --brown: 25 35% 30%;
  --brown-light: 25 25% 45%;
  --cream: 35 30% 97%;
  --cream-dark: 35 25% 92%;
  --blush: 10 30% 92%;

  /* Status (derived, AA on cream) */
  --success: 145 40% 30%;
  --success-soft: 140 30% 92%;
  --warning: 32 80% 32%;
  --warning-soft: 38 70% 92%;
  --info: 210 40% 35%;
  --info-soft: 210 40% 94%;

  /* Dark sections (footer, overlays) */
  --dark-bg: #1b1612;
  --dark-bg-2: #241d18;
  --dark-text: #ece8e2;
  --dark-muted: #c9c3bc;
  --dark-gold: #c9a56a;
  --dark-cta: linear-gradient(135deg, #c9a56a 0%, #b98c45 100%);
  --glow-soft: rgba(201, 165, 106, 0.18);
  --glow-strong: rgba(201, 165, 106, 0.45);
  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.20);

  /* Typography */
  --font-heading: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h4: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-h3: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-h2: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --fs-h1: clamp(2.75rem, 1.8rem + 5vw, 6.25rem);
  --fs-display: clamp(3.25rem, 2rem + 7vw, 8.5rem);

  --lh-tight: 1.02;
  --lh-heading: 1.1;
  --lh-body: 1.65;

  /* Spacing (4px scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-y: clamp(4rem, 3rem + 5vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 1200px;
  --container-narrow: 760px;

  /* Radii */
  --radius-sm: calc(var(--radius) * 0.75);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) * 2);
  --radius-xl: calc(var(--radius) * 3);
  --radius-2xl: calc(var(--radius) * 4);
  --radius-pill: 999px;
  /* Arch shape. Note: browsers scale ALL radii down when the top radii exceed the box width,
     which flattens the bottom corners. For exact arches use 50cqi (container query units) or
     explicit percentages, as in pages/landing.css. */
  --radius-arch: 999px 999px var(--radius-xl) var(--radius-xl);

  /* Shadows (warm-tinted) */
  --shadow-sm: 0 1px 2px hsl(25 30% 20% / 0.06), 0 1px 1px hsl(25 30% 20% / 0.04);
  --shadow-md: 0 6px 20px -6px hsl(25 30% 20% / 0.14), 0 2px 6px hsl(25 30% 20% / 0.05);
  --shadow-lg: 0 24px 50px -18px hsl(25 35% 20% / 0.28), 0 6px 14px -6px hsl(25 30% 20% / 0.08);
  --shadow-gold: 0 10px 30px -10px rgba(185, 140, 69, 0.55);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 600ms;
  --dur-reveal: 800ms;

  /* Layers */
  --z-header: 50;
  --z-banner: 60;
  --z-toast: 90;
  --z-proto: 95;

  --header-h: 68px;

  /* Subtle grain texture (inline SVG noise) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0 0.08 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: light;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}