/* ============================================
   WISHRITE DESIGN SYSTEM — VARIABLES
   Premium Silver Jewellery E-Commerce
   ============================================ */

:root {
    /* ── Brand Colors ── */
    --wr-primary: #5E3435;
    --wr-primary-dark: #4A2829;
    --wr-primary-light: #7A4E4F;
    --wr-primary-subtle: rgba(94, 52, 53, 0.08);

    /* ── Neutrals ── */
    --wr-black: #1A1A1A;
    --wr-charcoal: #2D2D2D;
    --wr-dark-grey: #444444;
    --wr-text: #333333;
    --wr-text-muted: #6B6B6B;
    --wr-text-light: #999999;
    --wr-border: #E5E1DC;
    --wr-border-light: #F0ECE7;
    --wr-bg-warm: #FAF8F5;
    --wr-bg-cream: #F5F1EC;
    --wr-off-white: #FDFCFB;
    --wr-white: #FFFFFF;

    /* ── Accent (Gold — used very sparingly) ── */
    --wr-gold: #B8956A;
    --wr-gold-light: #D4B896;

    /* ── Semantic ── */
    --wr-success: #18794E;
    --wr-error: #B42318;
    --wr-info: #3B7DD8;
    --wr-heart: #D64545;

    /* ── Typography ── */
    --font-display: 'Playfair Display', 'Georgia', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font Sizes — modular scale */
    --text-xs: 0.6875rem;     /* 11px */
    --text-sm: 0.8125rem;     /* 13px */
    --text-base: 0.9375rem;   /* 15px */
    --text-md: 1rem;          /* 16px */
    --text-lg: 1.125rem;      /* 18px */
    --text-xl: 1.25rem;       /* 20px */
    --text-2xl: 1.5rem;       /* 24px */
    --text-3xl: 2rem;         /* 32px */
    --text-4xl: 2.5rem;       /* 40px */
    --text-5xl: 3.25rem;      /* 52px */

    /* Line Heights */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* Letter Spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.08em;
    --tracking-widest: 0.16em;

    /* ── 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;
    --space-24: 96px;
    --space-32: 128px;

    /* Container */
    --container-padding: 5%;
    --container-max: 1440px;

    /* ── Borders & Radius ── */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
    --shadow-overlay: 0 16px 48px rgba(0,0,0,0.12);

    /* ── Transitions ── */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 200ms;
    --duration-normal: 350ms;
    --duration-slow: 600ms;
    --transition-base: all 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-fast: all 200ms ease;

    /* ── Z-Index Layers ── */
    --z-base: 1;
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;

    /* ── Product Image Ratio ── */
    --product-ratio: 4 / 5;
    --product-card-ratio: 4 / 5;
    --category-ratio: 3 / 4;
}