/* ═══════════════════════════════════════════════
   Shiv & Divi — Design Tokens
   Premium Romantic Aesthetic
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ─── Brand Colors ─── */
  --rose-deep:     #8B2252;
  --rose-primary:  #C2185B;
  --rose-soft:     #E91E63;
  --rose-light:    #F8BBD0;
  --rose-pale:     #FCE4EC;

  --gold-deep:     #B8860B;
  --gold-primary:  #D4A017;
  --gold-light:    #F5D061;
  --gold-pale:     #FFF8E1;

  --blush:         #FFE0E6;
  --cream:         #FFF5F5;
  --ivory:         #FFFAF0;

  /* ─── Dark / Neutral ─── */
  --charcoal:      #1A1A2E;
  --charcoal-mid:  #16213E;
  --charcoal-light:#0F3460;
  --slate:         #2C2C54;
  --slate-light:   #474787;

  /* ─── Semantic ─── */
  --bg-primary:    linear-gradient(135deg, #1A1A2E 0%, #16213E 40%, #0F3460 100%);
  --bg-glass:      rgba(255, 255, 255, 0.05);
  --bg-glass-hover:rgba(255, 255, 255, 0.08);
  --bg-card:       rgba(255, 255, 255, 0.07);
  --bg-input:      rgba(255, 255, 255, 0.08);

  --text-primary:  #F0E6EF;
  --text-secondary:#BCA8BC;
  --text-muted:    #8A7A8A;
  --text-accent:   var(--gold-light);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glow:   rgba(212, 160, 23, 0.3);

  /* ─── Shiv & Divi Accent Colors ─── */
  --shiv-accent:   #64B5F6;
  --shiv-accent-soft: rgba(100, 181, 246, 0.15);
  --shiv-glow:     rgba(100, 181, 246, 0.3);

  --divi-accent:   #F48FB1;
  --divi-accent-soft: rgba(244, 143, 177, 0.15);
  --divi-glow:     rgba(244, 143, 177, 0.3);

  /* ─── Status ─── */
  --success:       #66BB6A;
  --success-soft:  rgba(102, 187, 106, 0.15);
  --warning:       #FFA726;
  --warning-soft:  rgba(255, 167, 38, 0.15);
  --danger:        #EF5350;
  --danger-soft:   rgba(239, 83, 80, 0.15);

  /* ─── Typography ─── */
  --font-serif:    'Playfair Display', serif;
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-xs:         0.75rem;
  --fs-sm:         0.8125rem;
  --fs-base:       0.9375rem;
  --fs-md:         1.0625rem;
  --fs-lg:         1.25rem;
  --fs-xl:         1.5rem;
  --fs-2xl:        2rem;
  --fs-3xl:        2.5rem;

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

  /* ─── Spacing ─── */
  --sp-xs:         0.25rem;
  --sp-sm:         0.5rem;
  --sp-md:         1rem;
  --sp-lg:         1.5rem;
  --sp-xl:         2rem;
  --sp-2xl:        3rem;
  --sp-3xl:        4rem;

  /* ─── Borders & Radius ─── */
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-full:   9999px;

  /* ─── Shadows ─── */
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.2);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow:   0 0 20px rgba(212, 160, 23, 0.15);
  --shadow-rose:   0 0 20px rgba(233, 30, 99, 0.15);

  /* ─── Transitions ─── */
  --ease-out:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ─── Z-Index ─── */
  --z-base:        1;
  --z-dropdown:    100;
  --z-modal:       1000;
  --z-toast:       2000;
  --z-overlay:     3000;
}