/* ═══════════════════════════════════════════════════════════════
   Glowérieve — Design Tokens
   Extracted by reverse-engineering the reference artwork.
   Single source of truth: change a token here, the whole site moves.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Colour: primary family (deep botanical teal, from header/banner) ── */
  --color-primary:            #0E5A4F;
  --color-primary-dark:       #0A463D;
  --color-primary-darker:     #073931;
  --color-primary-light:      #2E8B7E;
  --color-primary-lighter:    #57B3A3;
  --color-accent:             #7FC8BD;   /* bright aqua, hero gradient tail */

  /* ── Colour: surfaces ── */
  --color-background:         #FFFFFF;
  --color-surface:            #EEF8F5;   /* pale mint panel */
  --color-surface-2:          #E3F2EC;   /* slightly deeper mint (circle fills) */
  --color-surface-warm:       #F4FBF9;   /* warm off-white */
  --color-hero-start:         #0E5A4F;
  --color-hero-end:           #57B3A3;

  /* ── Colour: text ── */
  --color-text:               #1F3D38;   /* charcoal-green */
  --color-text-strong:        #14342E;
  --color-text-muted:         #6B7C78;
  --color-text-inverse:       #FFFFFF;
  --color-text-inverse-muted: rgba(255, 255, 255, .72);

  /* ── Colour: lines, states, accents ── */
  --color-border:             #E2EDE9;
  --color-border-strong:      #C4D5CC;
  --color-border-inverse:     rgba(255, 255, 255, .22);
  --color-gold:               #F5B400;   /* star ratings */
  --color-sale:               #B4462F;   /* SALE badge / struck price */
  --color-success:            #2F7D5B;

  /* ── Typography families ── */
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── Type scale (fluid: clamp(min, preferred, max)) ── */
  --fs-display:  clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);     /* 40 → 72px */
  --fs-h1:       clamp(2.125rem, 1.5rem + 2.2vw, 3.5rem);   /* 34 → 56px */
  --fs-h2:       clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);   /* 28 → 40px */
  --fs-h3:       clamp(1.375rem, 1.2rem + .7vw, 1.75rem);   /* 22 → 28px */
  --fs-h4:       1.25rem;                                   /* 20px */
  --fs-lead:     clamp(1rem, .95rem + .25vw, 1.125rem);     /* 16 → 18px */
  --fs-body:     1rem;                                      /* 16px */
  --fs-sm:       .875rem;                                   /* 14px */
  --fs-xs:       .8125rem;                                  /* 13px */
  --fs-caption:  .75rem;                                    /* 12px */

  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-normal: 1.65;
  --lh-relaxed:1.8;

  --ls-eyebrow: .22em;   /* wide-tracked uppercase labels */
  --ls-label:   .14em;
  --ls-tight:  -.015em;  /* large serif headings */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Spacing scale ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Section rhythm (reference: very generous vertical breathing room) */
  --section-y:      clamp(56px, 4rem + 4vw, 112px);
  --section-y-tight: clamp(40px, 3rem + 2.4vw, 72px);

  /* ── Radius (reference: soft, never pill-excessive except buttons) ── */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-full: 999px;

  /* ── Shadows (reference: whisper-soft, low opacity, large blur) ── */
  --shadow-xs: 0 1px 2px rgba(14, 90, 79, .05);
  --shadow-sm: 0 2px 8px rgba(14, 90, 79, .06);
  --shadow-md: 0 8px 24px rgba(14, 90, 79, .08);
  --shadow-lg: 0 18px 48px rgba(14, 90, 79, .12);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, .5);

  /* ── Layout ── */
  --container-max:   1280px;
  --container-wide:  1440px;
  --container-pad:   clamp(16px, 1rem + 2vw, 40px);
  --gutter:          clamp(16px, 1rem + 1.4vw, 32px);
  --announce-h:      40px;
  --header-h:        88px;

  /* ── Motion (luxury micro-interactions: slow, quiet) ── */
  --ease-out-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:   160ms;
  --dur-base:   280ms;
  --dur-slow:   460ms;
  --dur-reveal: 720ms;

  /* ── Z-index ── */
  --z-header:   60;
  --z-overlay:  80;
  --z-menu:     90;
}

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