/* ============================================================
   TAVAZO — Design Tokens & CSS Custom Properties
   Iranian Specialty Shop | Color Palette from Brand Logo
   ============================================================ */

:root {
  /* ── Color Palette ── */
  --tavazo-teal:          #107571;
  --tavazo-teal-light:    #9FC0BC;
  --tavazo-teal-dark:     #0D5F5B;
  --tavazo-teal-darker:   #0B4945;
  --tavazo-teal-rgb:      16, 117, 113;

  --tavazo-gold:          #C29E53;
  --tavazo-gold-light:    #D4B06A;
  --tavazo-gold-dark:     #A88840;
  --tavazo-gold-rgb:      194, 158, 83;

  --tavazo-cream:         #F0EDEA;
  --tavazo-cream-dark:    #E8E4E0;
  --tavazo-cream-darker:  #DDD9D5;

  --tavazo-cream-warm:    #F5F2EF;

  --tavazo-charcoal:      #2D2D2D;
  --tavazo-charcoal-light:#4A4A4A;
  --tavazo-gray:          #7A7A7A;
  --tavazo-gray-light:    #B5B5B5;
  --tavazo-gray-lighter:  #E0E0E0;

  --tavazo-white:         #FFFFFF;
  --tavazo-black:         #1A1A1A;
  --tavazo-navy:          #112D51;
  --tavazo-navy-light:    #1A3D6B;
  --tavazo-gold-luxury:   #C29E53;

  --tavazo-success:       #2E7D5B;
  --tavazo-error:         #C0392B;
  --tavazo-warning:       #D4A017;

  /* ── Typography ── */
  --font-heading:         'Cormorant Garamond', 'Playfair Display', 'Georgia', serif;
  --font-body:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-accent:          'Cormorant Garamond', 'Playfair Display', 'Georgia', serif;

  --fs-xs:                0.75rem;     /* 12px */
  --fs-sm:                0.875rem;    /* 14px */
  --fs-base:              1rem;        /* 16px */
  --fs-md:                1.125rem;    /* 18px */
  --fs-lg:                1.25rem;     /* 20px */
  --fs-xl:                1.5rem;      /* 24px */
  --fs-2xl:               2rem;        /* 32px */
  --fs-3xl:               2.5rem;      /* 40px */
  --fs-4xl:               3rem;        /* 48px */
  --fs-5xl:               3.75rem;     /* 60px */

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

  --lh-tight:             1.2;
  --lh-base:              1.6;
  --lh-relaxed:           1.8;

  --ls-tight:             -0.02em;
  --ls-normal:            0;
  --ls-wide:              0.05em;
  --ls-wider:             0.1em;
  --ls-widest:            0.15em;

  /* ── Spacing Scale ── */
  --space-xs:             0.25rem;     /* 4px */
  --space-sm:             0.5rem;      /* 8px */
  --space-md:             1rem;        /* 16px */
  --space-lg:             1.5rem;      /* 24px */
  --space-xl:             2rem;        /* 32px */
  --space-2xl:            3rem;        /* 48px */
  --space-3xl:            4rem;        /* 64px */
  --space-4xl:            7rem;        /* 112px */
  --space-5xl:            10rem;       /* 160px */

  /* ── Luxury Section Tokens ── */
  --bg-dark:              #0A3B38;
  --bg-rich:              #0B4945;
  --section-pad:          80px;

  /* ── Layout ── */
  --container-sm:         640px;
  --container-md:         768px;
  --container-lg:         1024px;
  --container-xl:         1200px;
  --container-2xl:        1400px;
  --container-padding:    1.5rem;

  /* ── Border Radius ── */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            20px;
  --radius-full:          50%;

  /* ── Shadows ── */
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:            0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:            0 12px 40px rgba(0, 0, 0, 0.15);
  --shadow-gold:          0 4px 20px rgba(var(--tavazo-gold-rgb), 0.25);
  --shadow-teal:          0 4px 20px rgba(var(--tavazo-teal-rgb), 0.2);

  /* ── Transitions ── */
  --transition-fast:      150ms ease;
  --transition-base:      300ms ease;
  --transition-slow:      500ms ease;
  --transition-slower:    700ms ease;
  --transition-spring:    500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ── */
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-overlay:            300;
  --z-modal:              400;
  --z-toast:              500;

  /* ── Gold Gradient ── */
  --gradient-gold:        linear-gradient(135deg, #C29E53 0%, #D4B06A 40%, #E2C88A 60%, #C29E53 100%);
  --gradient-gold-hover:  linear-gradient(135deg, #D4B06A 0%, #E2C88A 40%, #C29E53 60%, #D4B06A 100%);
  --gradient-teal:        linear-gradient(135deg, var(--tavazo-teal-dark) 0%, var(--tavazo-teal) 50%, var(--tavazo-teal-light) 100%);

  /* ── Premium Effects ── */
  --glass-bg:             rgba(255, 255, 255, 0.08);
  --glass-bg-light:       rgba(255, 255, 255, 0.85);
  --glass-border:         rgba(200, 164, 78, 0.2);
  --glass-blur:           12px;

  --glow-gold:            0 0 20px rgba(200, 164, 78, 0.4), 0 0 60px rgba(200, 164, 78, 0.15);
  --glow-teal:            0 0 20px rgba(26, 124, 122, 0.4), 0 0 60px rgba(26, 124, 122, 0.15);
  --glow-gold-subtle:     0 0 12px rgba(200, 164, 78, 0.25);
  --glow-gold-text:       0 0 20px rgba(200, 164, 78, 0.5);

  --shadow-glow-gold:     0 4px 30px rgba(200, 164, 78, 0.3);
  --shadow-glow-teal:     0 4px 30px rgba(26, 124, 122, 0.25);

  --transition-luxe:      800ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce:    500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --perspective-card:     1000px;
  --perspective-section:  1500px;
}