/* ============================================================
   THE BATH & BODY SPOT — Design Tokens
   Soft Premium Feminine Palette
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* ── Core Brand Colors ─────────────────────────── */
  --blush-lightest:  #FEF2F2;
  --blush-light:     #FDE8E8;
  --blush-mid:       #F4C2C2;
  --blush-deep:      #E8A0A0;
  --pink-soft:       #F0A8B8;
  --pink-vibrant:    #E8748A;
  --pink-dark:       #C9546A;

  --ivory:           #FFF9F5;
  --cream:           #FDF5EE;
  --cream-dark:      #F5E8DA;
  --white:           #FFFFFF;

  --rose-gold:       #C9956E;
  --rose-gold-light: #DEB89A;
  --rose-gold-dark:  #A87250;

  --mauve:           #C4848C;
  --mauve-light:     #D9AAAF;
  --mauve-dark:      #A0606A;

  /* ── Text Colors ───────────────────────────────── */
  --text-dark:       #3D2B2B;
  --text-mid:        #7A5C5C;
  --text-light:      #B89090;
  --text-placeholder:#D4AEAE;
  --text-on-pink:    #FFFFFF;

  /* ── Backgrounds ───────────────────────────────── */
  --bg-page:         #FEF2F2;
  --bg-section-alt:  #FFF9F5;
  --bg-card:         #FFFFFF;
  --bg-card-hover:   #FFF5F5;
  --bg-glass:        rgba(255, 255, 255, 0.80);
  --bg-glass-deep:   rgba(253, 232, 232, 0.90);
  --bg-overlay:      rgba(61, 43, 43, 0.45);
  --bg-drawer:       rgba(255, 249, 245, 0.98);

  /* ── Typography ────────────────────────────────── */
  --font-display:    'Cormorant Garamond', Georgia, serif;
  --font-heading:    'Playfair Display', Georgia, serif;
  --font-body:       'DM Sans', system-ui, -apple-system, sans-serif;
  --font-label:      'Jost', system-ui, sans-serif;

  /* ── Font Sizes ────────────────────────────────── */
  --text-xs:   0.70rem;   /* 11px  */
  --text-sm:   0.825rem;  /* 13px  */
  --text-base: 1rem;      /* 16px  */
  --text-lg:   1.125rem;  /* 18px  */
  --text-xl:   1.25rem;   /* 20px  */
  --text-2xl:  1.5rem;    /* 24px  */
  --text-3xl:  2rem;      /* 32px  */
  --text-4xl:  2.75rem;   /* 44px  */
  --text-5xl:  3.5rem;    /* 56px  */
  --text-6xl:  4.5rem;    /* 72px  */
  --text-7xl:  6rem;      /* 96px  */

  /* ── Line Heights ──────────────────────────────── */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   2;

  /* ── Spacing Scale ─────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-14:  56px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-28:  112px;
  --sp-32:  128px;

  /* ── Border Radius ─────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-2xl:  48px;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────── */
  --shadow-xs:   0 1px 4px  rgba(200, 100, 100, 0.06);
  --shadow-sm:   0 4px 12px rgba(200, 100, 100, 0.08);
  --shadow-md:   0 8px 28px rgba(200, 100, 100, 0.12);
  --shadow-lg:   0 16px 50px rgba(200, 100, 100, 0.16);
  --shadow-xl:   0 24px 80px rgba(200, 100, 100, 0.22);
  --shadow-glow: 0 0 24px   rgba(232, 116, 138, 0.30);
  --shadow-pink: 0 8px 32px  rgba(232, 116, 138, 0.20);
  --shadow-gold: 0 4px 20px  rgba(201, 149, 110, 0.25);

  /* ── Border Colors ─────────────────────────────── */
  --border-soft:   rgba(244, 194, 194, 0.35);
  --border-mid:    rgba(232, 160, 160, 0.50);
  --border-strong: var(--blush-deep);
  --border-gold:   rgba(201, 149, 110, 0.40);

  /* ── Gradients ─────────────────────────────────── */
  --grad-blush:        linear-gradient(135deg, #FDE8E8 0%, #FFF9F5 50%, #FDE8E8 100%);
  --grad-pink:         linear-gradient(135deg, #F4C2C2 0%, #E8A0A0 100%);
  --grad-rose-gold:    linear-gradient(135deg, #DEB89A 0%, #C9956E 100%);
  --grad-hero:         linear-gradient(145deg, #FEF2F2 0%, #FDE8E8 40%, #F4C2C2 100%);
  --grad-card:         linear-gradient(180deg, #FFFFFF 0%, #FFF9F5 100%);
  --grad-mauve:        linear-gradient(135deg, #D9AAAF 0%, #C4848C 100%);

  /* ── Transitions ───────────────────────────────── */
  --ease-fast:    150ms ease;
  --ease-med:     300ms ease;
  --ease-slow:    500ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  450ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:  600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-silk:    400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Layout ────────────────────────────────────── */
  --container-max:     1280px;
  --container-narrow:  900px;
  --container-pad:     clamp(16px, 4vw, 48px);

  /* ── Component Heights ─────────────────────────── */
  --bar-height:   42px;
  --nav-height:   76px;
  --total-header: calc(var(--bar-height) + var(--nav-height));

  /* ── Z-Index ───────────────────────────────────── */
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-drawer:  400;
  --z-modal:   500;
  --z-toast:   600;
  --z-loading: 9999;
}

/* ── Responsive Token Overrides ──────────────────── */
@media (max-width: 768px) {
  :root {
    --text-5xl: 2.5rem;
    --text-6xl: 3rem;
    --text-7xl: 3.5rem;
    --sp-20:    48px;
    --sp-24:    64px;
    --sp-32:    80px;
    --nav-height: 64px;
  }
}