/* ═══════════════════════════════════════════════════════════════════════════
   ELAAF — Design Tokens & CSS Custom Properties
   All styling variables centralized here. Edit this file to retheme the store.
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
  /* ── Brand Colors ───────────────────────────────────────────────────────── */
  --clr-primary:         #6E1F2A;   /* Deep Burgundy: Buttons, headings, nav hover, price, newsletter */
  --clr-primary-dark:    #4E151E;   /* Burgundy Deep: Button hover state */
  --clr-primary-light:   #8C2D3B;
  --clr-primary-xlight:  #F7EBEF;   /* Very light burgundy for hover states */

  --clr-accent:          #B38B3D;   /* Antique Gold: Eyebrow labels, badge icons, borders, sale tags */
  --clr-accent-dark:     #8C6B2B;
  --clr-accent-light:    #D9BD82;   /* Gold Light: Category card tags, Instagram link */

  /* ── Neutral Background System ──────────────────────────────────────────── */
  --clr-bg:              #FAF8F4;   /* Warm White: Main background */
  --clr-surface:         #FAF8F4;   /* Warm White: Header / card surface */
  --clr-muted:           #F4EFE6;   /* Cream: Alternating section backgrounds */
  --clr-muted-2:         #E6DEC9;   /* Border / divider */
  --clr-skeleton:        #EFE7D5;   /* Loading skeleton */

  /* ── Typography Colors ──────────────────────────────────────────────────── */
  --clr-text:            #2B2B2B;   /* Dark Charcoal: Body text & nav links */
  --clr-text-muted:      #5C5C5C;   /* Secondary / caption text */
  --clr-text-faint:      #8C8C8C;   /* Placeholder text */
  --clr-text-inverse:    #FAF8F4;   /* Text on dark backgrounds (Warm White) */

  /* ── Status Colors ──────────────────────────────────────────────────────── */
  --clr-success:         #2E7D52;
  --clr-success-bg:      #EAF7EF;
  --clr-error:           #C0392B;
  --clr-error-bg:        #FDEAEA;
  --clr-warning:         #D97706;
  --clr-warning-bg:      #FEF3C7;
  --clr-info:            #2563EB;
  --clr-info-bg:         #EFF6FF;

  /* ── Badge Colors ───────────────────────────────────────────────────────── */
  --clr-sale-badge:      #E74C3C;
  --clr-sale-badge-text: #FFFFFF;
  --clr-new-badge:       #2E7D52;
  --clr-new-badge-text:  #FFFFFF;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-heading:        'Playfair Display', Georgia, serif;
  --font-body:           'Inter', system-ui, -apple-system, sans-serif;

  --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 */

  --leading-tight:       1.25;
  --leading-snug:        1.375;
  --leading-normal:      1.5;
  --leading-relaxed:     1.625;
  --leading-loose:       2;

  --tracking-tight:      -0.025em;
  --tracking-normal:     0;
  --tracking-wide:       0.05em;
  --tracking-wider:      0.1em;
  --tracking-widest:     0.2em;

  /* ── Spacing Scale ──────────────────────────────────────────────────────── */
  --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 */

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --container-max:       1440px;
  --container-wide:      1280px;
  --container-default:   1200px;
  --container-narrow:    900px;
  --container-xs:        640px;

  --header-height:       72px;
  --header-height-mobile:64px;

  /* ── Borders & Radius ───────────────────────────────────────────────────── */
  --border-width:        1px;
  --border-color:        var(--clr-muted-2);
  --border:              var(--border-width) solid var(--border-color);

  --radius-xs:           2px;
  --radius-sm:           4px;
  --radius-md:           8px;
  --radius-lg:           16px;
  --radius-xl:           24px;
  --radius-full:         9999px;

  /* ── Shadows ────────────────────────────────────────────────────────────── */
  --shadow-xs:           0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card:         0 2px 16px rgba(0, 0, 0, 0.07);
  --shadow-hover:        0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-modal:        0 24px 64px rgba(0, 0, 0, 0.18);
  --shadow-primary:      0 4px 16px rgba(123, 31, 46, 0.3);

  /* ── Transitions ────────────────────────────────────────────────────────── */
  --transition-fast:     0.15s ease;
  --transition:          0.25s ease;
  --transition-slow:     0.4s ease;
  --transition-bounce:   0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index Scale ──────────────────────────────────────────────────────── */
  --z-below:             -1;
  --z-base:              0;
  --z-raised:            10;
  --z-dropdown:          100;
  --z-sticky:            200;
  --z-overlay:           300;
  --z-modal:             400;
  --z-toast:             10000;
}

/* ── Dark Mode Override (for admin panel) ─────────────────────────────────── */
.theme-dark {
  --clr-bg:              #0F0F0F;
  --clr-surface:         #1A1A1A;
  --clr-muted:           #242424;
  --clr-muted-2:         #333333;
  --clr-text:            #F5F5F5;
  --clr-text-muted:      #A0A0A0;
  --clr-border:          #333333;
}