/* ╔══════════════════════════════════════════════════════════╗
   ║   PB STORE — DESIGN TOKENS v1.0                          ║
   ║   Tek kaynak: renk, tipografi, spacing, layout           ║
   ║   premium.css ve sayfa stillerinden ÖNCE yüklenir        ║
   ╚══════════════════════════════════════════════════════════╝ */

:root {
  /* ── Bordo ── */
  --bordo-900: #3D0A14;
  --bordo-800: #5C1320;
  --bordo-700: #7B1E2B;
  --bordo-600: #962535;
  --bordo-500: #A53442;

  /* ── Altın ── */
  --altin-700: #9A7B1A;
  --altin-600: #B8941F;
  --altin-500: #D4AF37;
  --altin-400: #E0BE52;
  --altin-300: #E8C968;

  /* ── Krem / Bej ── */
  --krem-50:  #FDFBF6;
  --krem-100: #FAF7F2;
  --krem-200: #F0EBE0;
  --krem-300: #E8E0D2;
  --krem:     var(--krem-100);
  --krem-koyu: var(--krem-200);

  /* ── Nötr ── */
  --siyah:       #0A0A0A;
  --siyah-soft:  #1A1A1A;
  --beyaz:       #FFFFFF;
  --gri-text:    #6B655C;
  --gri-border:  #E8E0D2;
  --gri-soft:    #F5F2EE;
  --gri-suzme:   #F5F2EE;

  /* ── Yüzeyler ── */
  --surface-page:   var(--krem-100);
  --surface-card:   var(--beyaz);
  --surface-footer: var(--siyah);
  --surface-nav:    rgba(253, 251, 246, 0.92);

  /* ── Semantik ── */
  --basari:   #2D8F4F;
  --uyari:    #D49B27;
  --tehlike:  #C44545;
  --bilgi:    #4A6FA5;

  /* ── Tipografi ── */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;
  --serif: var(--font-serif);
  --sans:  var(--font-sans);

  --text-display-xl: clamp(34px, 8vw, 52px);
  --text-display-lg: clamp(28px, 4vw, 44px);
  --text-display-md: clamp(22px, 3vw, 28px);
  --text-body:       15px;
  --text-body-sm:    14px;
  --text-caption:    11px;
  --text-label:      10px;
  --text-price:      22px;

  --leading-tight:  1.05;
  --leading-snug:   1.15;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.5px;
  --tracking-normal: 0;
  --tracking-wide:   2px;
  --tracking-wider:  3px;
  --tracking-widest: 4px;

  /* ── Border radius ── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 999px;

  /* ── Shadow ── */
  --shadow-card:    0 2px 12px rgba(61, 10, 20, 0.04);
  --shadow-elegant: 0 8px 32px rgba(61, 10, 20, 0.08);
  --shadow-hover:   0 16px 48px rgba(61, 10, 20, 0.14);
  --shadow-deep:    0 24px 60px rgba(61, 10, 20, 0.18);
  --shadow-nav:     0 2px 12px rgba(61, 10, 20, 0.06);
  --shadow-gold:    0 8px 24px rgba(212, 175, 55, 0.25);

  /* ── Container genişlikleri ── */
  --container-sm: 1200px;
  --container-md: 1280px;
  --container-lg: 1320px;
  --container-xl: 1440px;
  --container-2xl: 1600px;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --section-padding-y: clamp(40px, 6vw, 80px);
  --section-padding-x: clamp(16px, 4vw, 40px);
  --nav-padding-y: 14px;
  --nav-padding-x: clamp(16px, 4vw, 40px);

  /* ── Breakpoints (referans — media query'lerde kullanılır) ── */
  --bp-xs:     359px;
  --bp-sm:     480px;
  --bp-md:     600px;
  --bp-tablet: 1024px;
  --bp-laptop: 1440px;
  --bp-desktop: 1920px;

  /* ── Transition & easing ── */
  --duration-fast: 0.25s;
  --duration-base: 0.4s;
  --duration-slow: 0.55s;

  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snappy: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-enter:  cubic-bezier(0.22, 1, 0.36, 1);

  --tr-smooth: var(--duration-base) var(--ease-smooth);
  --tr-snappy: var(--duration-fast) var(--ease-snappy);

  /* ── Border ── */
  --border-gold-subtle: rgba(212, 175, 55, 0.18);
  --border-gold:        rgba(212, 175, 55, 0.35);
  --border-gold-strong: rgba(212, 175, 55, 0.55);

  /* ── Gradient ── */
  --gradient-hero:       linear-gradient(135deg, var(--bordo-900) 0%, var(--bordo-800) 100%);
  --gradient-newsletter: linear-gradient(135deg, var(--bordo-900), var(--bordo-800));
  --gradient-welcome:    radial-gradient(ellipse 120% 100% at 50% 0%, var(--bordo-700) 0%, var(--bordo-900) 45%, var(--siyah) 100%);
  --gradient-gold-line:  linear-gradient(90deg, transparent, var(--altin-500), transparent);

  /* ── Z-index ── */
  --z-nav:     100;
  --z-drawer:  998;
  --z-overlay: 999;
  --z-welcome: 10000;
  --z-toast:   10001;
}