/* ==========================================================================
   Crystal Hair — tokens.css
   Rose Quartz design system · primitive + semantic custom properties.
   Pure CSS. Load BEFORE main.css. Contract documented in DESIGN.md.
   ========================================================================== */

:root {
  /* -- 1. Primitives · rose-clay ramp (brand anchor #D78B79 = --rose-400) -- */
  --rose-50:   #FBF4F1;
  --rose-100:  #F6E6E0;
  --rose-200:  #EECFC5;
  --rose-300:  #E3A693;
  --rose-400:  #D78B79;  /* brand anchor — decorative only on light ground */
  --rose-500:  #C77B67;
  --rose-600:  #B3614E;  /* large text on light */
  --rose-700:  #A8574B;  /* text accent + filled buttons (white 5.08:1) */
  --rose-800:  #8A4538;
  --rose-900:  #6D362C;

  /* -- 2. Primitives · warm porcelain neutrals -- */
  --ivory:        #FFFDFB;
  --cream:        #F8F2EC;
  --porcelain:    #F3EAE2;
  --line:         #F0E4DA;
  --line-strong:  #E4D3C6;
  --ink:          #211A17;
  --ink-soft:     #4A403C;
  --muted:        #6E635E;
  --coal:         #17110F;

  /* -- 3. Primitives · functional hues -- */
  --wa:         #0E7A43;  /* WhatsApp fill (white 5.41:1) */
  --wa-strong:  #0B6337;  /* WhatsApp hover / green on light */
  --wa-bright:  #25D366;  /* glyph accent on dark chips only */
  --gold:       #C99B3F;  /* star icons only */
  --gold-deep:  #8A6D3B;
  --success:       #256B47;
  --success-text:  #1F5A3B;
  --success-soft:  #EDF6F0;
  --danger:        #A93226;
  --danger-soft:   #FBF0EE;
  --warning-text:  #8F6218;

  /* -- 4. Semantic aliases (components consume these) -- */
  --color-bg:            var(--ivory);
  --color-bg-alt:        var(--cream);
  --color-bg-deep:       var(--porcelain);
  --color-surface:       #FFFFFF;
  --color-dark:          var(--coal);
  --color-text:          var(--ink);
  --color-text-2:        var(--ink-soft);
  --color-muted:         var(--muted);
  --color-accent:        var(--rose-700);
  --color-accent-strong: var(--rose-800);
  --color-accent-soft:   var(--rose-100);
  --color-accent-border: var(--rose-500);
  --color-link:          var(--rose-700);
  --color-border:        var(--line);
  --color-border-strong: var(--line-strong);
  --on-dark:             #FFF9F5;
  --on-dark-muted:       #B8AAA2;
  --on-dark-line:        rgba(227, 166, 147, 0.28); /* rose-300 @28% */

  /* -- 5. Typography -- */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-script:  "Satisfy", "Segoe Script", "Brush Script MT", cursive;
  --font-body:    "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.6rem, 1.1rem + 5vw, 4.4rem);
  --fs-h1:      clamp(2.1rem, 1.3rem + 3vw, 3.2rem);
  --fs-h2:      clamp(1.55rem, 1.2rem + 1.5vw, 2.15rem);
  --fs-h3:      1.375rem;
  --fs-h4:      1.125rem;
  --fs-lead:    1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-nav:     0.8125rem;
  --fs-script:  1.375rem;

  --lh-display: 1.08;
  --lh-heading: 1.2;
  --lh-body:    1.75;
  --lh-lead:    1.75;
  --lh-small:   1.65;

  --ls-nav:     0.16em;   /* caps nav links */
  --ls-btn:     0.12em;   /* caps buttons   */
  --ls-label:   0.08em;   /* form labels    */
  --ls-display: 0.04em;   /* caps headings  */

  /* -- 6. Spacing (4px base) -- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  40px;
  --sp-8:  48px;
  --sp-9:  64px;
  --sp-10: 80px;
  --sp-11: 96px;
  --sp-12: 120px;
  --section-pad: clamp(64px, 10vw, 112px);

  --container:      1240px;
  --container-narrow: 820px;
  --container-wide: 1360px;
  --container-pad:  20px;
  --header-h:       76px;
  --header-h-sm:    64px;
  --bookingbar-h:   72px;
  --bar-clear:      calc(var(--bookingbar-h) + env(safe-area-inset-bottom));

  /* -- 7. Radii -- */
  --r-xs:   2px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-pill: 999px;

  /* -- 8. Depth -- */
  --shadow-1:    0 2px 12px rgba(109, 54, 44, 0.06);
  --shadow-2:    0 18px 44px -14px rgba(109, 54, 44, 0.20);
  --shadow-wa:   0 12px 28px -10px rgba(14, 122, 67, 0.45);
  --shadow-toast: 0 12px 32px -8px rgba(23, 17, 15, 0.35);
  --ring: 0 0 0 4px rgba(199, 123, 103, 0.18);      /* input focus ring */
  --ring-focus: 2px solid var(--rose-600);          /* :focus-visible   */

  /* -- 9. Motion -- */
  --t:      200ms ease;
  --t-slow: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fade: 600ms ease;                                /* slide crossfade   */
  --t-rise: 560ms cubic-bezier(0.22, 0.61, 0.36, 1);   /* text stagger rise */

  /* -- 10. Component-specific composites -- */
  --frame-offset: 16px;                       /* crystal frame offset       */
  --gradient-hero: linear-gradient(160deg, var(--porcelain) 0%, var(--ivory) 62%);
  --hs-wash: linear-gradient(90deg,
      rgba(243, 234, 226, 0.94) 0%, rgba(243, 234, 226, 0.62) 36%,
      rgba(243, 234, 226, 0.14) 58%, rgba(243, 234, 226, 0) 76%);
  --hs-accent-m: #F2C4B4;  /* hero accent on the mobile scrim — 8.8:1 worst-case */
  --hs-scrim-m: linear-gradient(180deg,
      rgba(23, 17, 15, 0) 36%, rgba(23, 17, 15, 0.60) 50%,
      rgba(23, 17, 15, 0.88) 62%, rgba(23, 17, 15, 0.94) 100%);
  --glow-rose: radial-gradient(closest-side, rgba(215, 139, 121, 0.14), transparent 70%);
  --overlay-card: linear-gradient(180deg, rgba(23, 17, 15, 0) 34%, rgba(23, 17, 15, 0.78) 100%);
  --header-bg: rgba(255, 253, 251, 0.92);

  /* -- 11. Z-index scale -- */
  --z-header: 100;
  --z-booking: 90;
  --z-toast: 200;
  --z-nav: 300;
}

@media (min-width: 768px) {
  :root { --container-pad: 32px; }
}