/* ============================================================
   PerfumerySHK — Design Tokens
   Luxury Perfume E-Commerce Design System
   ============================================================ */

:root {
  /* ── Brand Colors ─────────────────────────────────────── */
  --color-gold:          #D4AF37;
  --color-luxury-gold:   #F5C542;
  --color-gold-light:    #E8CC6E;
  --color-gold-dark:     #B8860B;
  --color-gold-muted:    rgba(212, 175, 55, 0.15);
  --color-gold-glow:     rgba(212, 175, 55, 0.35);

  --color-black:         #111111;
  --color-charcoal:      #171717;
  --color-charcoal-light:#1E1E1E;
  --color-gray-900:      #222222;
  --color-gray-800:      #333333;
  --color-gray-700:      #444444;
  --color-gray-600:      #666666;
  --color-gray-500:      #888888;
  --color-gray-400:      #AAAAAA;
  --color-gray-300:      #CCCCCC;
  --color-gray-200:      #E5E5E5;
  --color-gray-100:      #F0F0F0;

  --color-ivory:         #F8F6F2;
  --color-ivory-dark:    #EDE9E0;
  --color-white:         #FFFFFF;

  --color-success:       #2ECC71;
  --color-warning:       #F39C12;
  --color-danger:        #E74C3C;
  --color-info:          #3498DB;

  /* ── Gradients ────────────────────────────────────────── */
  --gradient-gold:       linear-gradient(135deg, #D4AF37 0%, #F5D76E 50%, #B8860B 100%);
  --gradient-gold-subtle:linear-gradient(135deg, rgba(212,175,55,0.1) 0%, rgba(245,215,110,0.05) 100%);
  --gradient-dark:       linear-gradient(180deg, #111111 0%, #171717 100%);
  --gradient-hero:       linear-gradient(135deg, #0a0a0a 0%, #171717 40%, #1a1510 100%);
  --gradient-card:       linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
  --gradient-glass:      linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-shimmer:    linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.08) 50%, transparent 100%);

  /* ── Typography ───────────────────────────────────────── */
  --font-heading:        'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body:           'Inter', 'Helvetica Neue', 'Arial', sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font Sizes — modular scale (1.25 ratio) */
  --text-xs:             0.75rem;    /* 12px */
  --text-sm:             0.875rem;   /* 14px */
  --text-base:           1rem;       /* 16px */
  --text-md:             1.125rem;   /* 18px */
  --text-lg:             1.25rem;    /* 20px */
  --text-xl:             1.5rem;     /* 24px */
  --text-2xl:            1.875rem;   /* 30px */
  --text-3xl:            2.25rem;    /* 36px */
  --text-4xl:            3rem;       /* 48px */
  --text-5xl:            3.75rem;    /* 60px */
  --text-6xl:            4.5rem;     /* 72px */

  /* Font Weights */
  --weight-light:        300;
  --weight-regular:      400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;
  --weight-black:        900;

  /* Line Heights */
  --leading-tight:       1.15;
  --leading-snug:        1.3;
  --leading-normal:      1.5;
  --leading-relaxed:     1.7;
  --leading-loose:       2;

  /* Letter Spacing */
  --tracking-tighter:    -0.02em;
  --tracking-tight:      -0.01em;
  --tracking-normal:     0;
  --tracking-wide:       0.025em;
  --tracking-wider:      0.05em;
  --tracking-widest:     0.15em;

  /* ── Spacing (4px base) ───────────────────────────────── */
  --space-0:             0;
  --space-1:             0.25rem;    /* 4px */
  --space-2:             0.5rem;     /* 8px */
  --space-3:             0.75rem;    /* 12px */
  --space-4:             1rem;       /* 16px */
  --space-5:             1.25rem;    /* 20px */
  --space-6:             1.5rem;     /* 24px */
  --space-8:             2rem;       /* 32px */
  --space-10:            2.5rem;     /* 40px */
  --space-12:            3rem;       /* 48px */
  --space-16:            4rem;       /* 64px */
  --space-20:            5rem;       /* 80px */
  --space-24:            6rem;       /* 96px */
  --space-32:            8rem;       /* 128px */

  /* ── Border Radius ────────────────────────────────────── */
  --radius-sm:           4px;
  --radius-md:           8px;
  --radius-lg:           12px;
  --radius-xl:           16px;
  --radius-2xl:          24px;
  --radius-full:         9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md:           0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-lg:           0 8px 30px rgba(0, 0, 0, 0.25);
  --shadow-xl:           0 16px 50px rgba(0, 0, 0, 0.35);
  --shadow-gold:         0 4px 20px rgba(212, 175, 55, 0.25);
  --shadow-gold-lg:      0 8px 40px rgba(212, 175, 55, 0.3);
  --shadow-gold-glow:    0 0 30px rgba(212, 175, 55, 0.15);
  --shadow-inner:        inset 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-card:         0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.06);
  --shadow-card-hover:   0 8px 24px rgba(0, 0, 0, 0.12), 0 16px 48px rgba(0, 0, 0, 0.08);

  /* ── Borders ──────────────────────────────────────────── */
  --border-subtle:       1px solid rgba(255, 255, 255, 0.06);
  --border-light:        1px solid rgba(255, 255, 255, 0.1);
  --border-medium:       1px solid rgba(255, 255, 255, 0.15);
  --border-gold:         1px solid rgba(212, 175, 55, 0.3);
  --border-gold-solid:   1px solid var(--color-gold);
  --border-divider:      1px solid var(--color-gray-200);

  /* ── Transitions ──────────────────────────────────────── */
  --ease-out:            cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:         cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:         cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:         cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --duration-fast:       150ms;
  --duration-normal:     250ms;
  --duration-slow:       400ms;
  --duration-slower:     600ms;
  --duration-slowest:    1000ms;

  --transition-base:     all var(--duration-normal) var(--ease-out);
  --transition-fast:     all var(--duration-fast) var(--ease-out);
  --transition-slow:     all var(--duration-slow) var(--ease-out);
  --transition-color:    color var(--duration-fast) var(--ease-out),
                         background-color var(--duration-fast) var(--ease-out),
                         border-color var(--duration-fast) var(--ease-out);
  --transition-transform:transform var(--duration-normal) var(--ease-out);
  --transition-shadow:   box-shadow var(--duration-normal) var(--ease-out);
  --transition-opacity:  opacity var(--duration-normal) var(--ease-out);

  /* ── Z-Index Scale ────────────────────────────────────── */
  --z-behind:            -1;
  --z-base:              0;
  --z-dropdown:          100;
  --z-sticky:            200;
  --z-header:            1000;
  --z-overlay:           1100;
  --z-drawer:            1200;
  --z-modal:             1300;
  --z-toast:             1400;
  --z-tooltip:           1500;

  /* ── Container Widths ─────────────────────────────────── */
  --container-sm:        640px;
  --container-md:        768px;
  --container-lg:        1024px;
  --container-xl:        1280px;
  --container-max:       1440px;
  --container-padding:   var(--space-4);

  /* ── Glassmorphism ────────────────────────────────────── */
  --glass-bg:            rgba(17, 17, 17, 0.75);
  --glass-bg-light:      rgba(248, 246, 242, 0.85);
  --glass-blur:          12px;
  --glass-border:        1px solid rgba(255, 255, 255, 0.08);

  /* ── Logo Sizes ───────────────────────────────────────── */
  --logo-desktop:        60px;
  --logo-tablet:         50px;
  --logo-mobile:         40px;

  /* ── Aspect Ratios ────────────────────────────────────── */
  --ratio-square:        1 / 1;
  --ratio-portrait:      3 / 4;
  --ratio-landscape:     4 / 3;
  --ratio-wide:          16 / 9;
  --ratio-product:       3 / 4;
}

/* ── Dark Theme (Default) ─────────────────────────────────── */
[data-theme="dark"], :root {
  --bg-primary:          #0B0B0F;
  --bg-secondary:        #111827;
  --bg-tertiary:         var(--color-charcoal-light);
  --bg-elevated:         var(--color-gray-900);
  --bg-surface:          rgba(255, 255, 255, 0.03);
  --bg-surface-hover:    rgba(255, 255, 255, 0.06);
  --bg-input:            rgba(255, 255, 255, 0.05);

  --text-primary:        var(--color-white);
  --text-secondary:      #A1A1AA;
  --text-tertiary:       var(--color-gray-500);
  --text-accent:         var(--color-gold);
  --text-inverse:        var(--color-black);

  --border-default:      var(--border-subtle);
  --border-hover:        var(--border-light);
  --border-focus:        var(--border-gold);
}

/* ── Light Theme ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg-primary:          var(--color-ivory);
  --bg-secondary:        var(--color-white);
  --bg-tertiary:         var(--color-gray-100);
  --bg-elevated:         var(--color-white);
  --bg-surface:          rgba(0, 0, 0, 0.02);
  --bg-surface-hover:    rgba(0, 0, 0, 0.04);
  --bg-input:            rgba(0, 0, 0, 0.03);

  --text-primary:        var(--color-charcoal);
  --text-secondary:      var(--color-gray-600);
  --text-tertiary:       var(--color-gray-500);
  --text-accent:         var(--color-gold-dark);
  --text-inverse:        var(--color-ivory);

  --border-default:      var(--border-divider);
  --border-hover:        1px solid var(--color-gray-300);
  --border-focus:        var(--border-gold);
}

/* ── Keyframe Animations ──────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes goldGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.2); }
  50%      { box-shadow: 0 0 20px rgba(212, 175, 55, 0.4); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes revealLine {
  from { width: 0; }
  to   { width: 60px; }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduced Motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}