/* ═══════════════════════════════════════════════════════════════════════════
   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:         #7B1F2E;   /* Deep Maroon */
  --clr-primary-dark:    #5C1520;
  --clr-primary-light:   #9E3647;
  --clr-primary-xlight:  #F5E8EA;   /* Very light maroon for hover states */

  --clr-accent:          #C4956A;   /* Warm Gold */
  --clr-accent-dark:     #A87B52;
  --clr-accent-light:    #E8CBA8;

  /* ── Neutral Background System ──────────────────────────────────────────── */
  --clr-bg:              #FAF8F5;   /* Warm off-white page bg */
  --clr-surface:         #FFFFFF;   /* Card / section surface */
  --clr-muted:           #F0ECE6;   /* Beige — alternate section bg */
  --clr-muted-2:         #E8E2DA;   /* Border / divider */
  --clr-skeleton:        #EDE9E3;   /* Loading skeleton */

  /* ── Typography Colors ──────────────────────────────────────────────────── */
  --clr-text:            #1A1A1A;   /* Primary text */
  --clr-text-muted:      #6B6B6B;   /* Secondary / caption text */
  --clr-text-faint:      #A0A0A0;   /* Placeholder text */
  --clr-text-inverse:    #FFFFFF;   /* Text on dark backgrounds */

  /* ── 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;
}