/*
 * ======================================================
 * LUXURY DESIGN SYSTEM — CSS TOKENS
 * Inspired by Kushal's Fashion Jewellery (kushals.com)
 * ======================================================
 * DO NOT add random colors/sizes here.
 * All values are intentional design decisions.
 */

:root {
  /* ── PRIMARY BRAND COLOR (Kushal's Magenta Pink & Gold Accent) ── */
  --clr-primary:         #d6006e;
  --clr-primary-dark:    #b5005b;
  --clr-primary-light:   rgba(214, 0, 110, 0.08);
  --clr-primary-gradient: linear-gradient(135deg, #e60067 0%, #d6006e 60%, #b5005b 100%);

  /* ── SECONDARY (Emerald Green / Positive) ── */
  --clr-secondary:       #1b8a5a;
  --clr-secondary-dark:  #146944;
  --clr-secondary-light: rgba(27, 138, 90, 0.08);

  /* ── NEUTRALS ── */
  --clr-black:           #000000;
  --clr-dark:            #1a1a1a;
  --clr-dark-2:          #222222;
  --clr-charcoal:        #414141;
  --clr-medium:          #6b6b6b;
  --clr-muted:           #9a9a9a;
  --clr-border:          #eef0f2;
  --clr-border-dark:     #d0d0d0;
  --clr-bg:              #ffffff;
  --clr-bg-alt:          #fdf9fa;
  --clr-bg-section:      #faf7f8;
  --clr-white:           #ffffff;

  /* ── ACCENT (Champagne Gold) ── */
  --clr-gold:            #cba152;
  --clr-gold-light:      #f4ebdb;
  --clr-star:            #f6a529;
  --clr-star-empty:      rgba(246, 165, 41, 0.25);

  /* ── SEMANTIC ── */
  --clr-success:         #1b8a5a;
  --clr-danger:          #d6006e;
  --clr-warning:         #f39c12;
  --clr-info:            #2980b9;

  /* ── TYPOGRAPHY ── */
  --font-body:           'Jost', 'Lato', sans-serif;
  --font-display:        'Cormorant Garamond', 'Playfair Display', Georgia, serif;

  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   26px;
  --text-3xl:   32px;
  --text-4xl:   40px;
  --text-5xl:   52px;

  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-black:      900;

  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  /* ── SPACING ── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   32px;
  --sp-8:   40px;
  --sp-9:   56px;
  --sp-10:  72px;
  --sp-11:  96px;
  --sp-12: 128px;

  /* ── BORDER RADIUS ── */
  --r-xs:     2px;
  --r-sm:     4px;
  --r-md:     6px;
  --r-lg:     10px;
  --r-xl:     16px;
  --r-pill:   100px;
  --r-circle: 50%;

  /* ── SHADOWS ── */
  --shadow-xs:      0 1px 3px rgba(0,0,0,0.07);
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:      0 16px 56px rgba(0,0,0,0.15);
  --shadow-card:    0 2px 12px rgba(0,0,0,0.07);
  --shadow-card-hover: 0 8px 36px rgba(0,0,0,0.14);
  --shadow-header:  0 2px 20px rgba(0,0,0,0.08);
  --shadow-drawer:  -4px 0 32px rgba(0,0,0,0.12);
  --shadow-modal:   0 20px 60px rgba(0,0,0,0.18);

  /* ── TRANSITIONS ── */
  --t-fast:    150ms ease;
  --t-base:    250ms ease;
  --t-slow:    400ms ease;
  --t-reveal:  700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-slide:   300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-zoom:    600ms cubic-bezier(0, 0.14, 0.19, 1);

  /* ── Z-INDEX LAYERS ── */
  --z-below:      -1;
  --z-base:        0;
  --z-dropdown:  200;
  --z-sticky:    400;
  --z-drawer:    800;
  --z-overlay:   900;
  --z-modal:    1000;
  --z-toast:    1200;

  /* ── LAYOUT ── */
  --container-max:     1400px;
  --container-pad:     clamp(16px, 3vw, 40px);
  --grid-gap:          12px;
  --section-gap:       var(--sp-9);
  --card-radius:       var(--r-md);
  --header-height:     72px;
  --topbar-height:     38px;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}