/* ===================================
   CSS Custom Properties (Design Tokens)
   =================================== */

:root {
    /* Colors - Primary (Vibrant Saffron/Orange) */
    --primary-color: #FF6B35;
    --primary-color-rgb: 255, 107, 53;
    --primary-dark: #E85A2A;
    --primary-light: #FF8C5A;

    /* Colors - Secondary (Deep Maroon/Red) */
    --secondary-color: #C41E3A;
    --secondary-dark: #A01829;
    --secondary-light: #D63851;

    /* Colors - Accent (Golden Yellow from Logo) */
    --accent-color: #FDB913;
    --accent-dark: #E8A50A;
    --accent-light: #FFCA3A;

    /* Colors - Neutrals */
    --color-white: #ffffff;
    --color-black: #000000;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Colors - Semantic */
    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-error: #DC2626;
    --color-info: #FF6B35;

    /* Colors - Background (Warm Indian tones) */
    --bg-primary: #FFFBF5;
    --bg-secondary: #FFF4E6;
    --bg-tertiary: #FFE8CC;

    /* Colors - Text */
    --text-primary: #2D1B00;
    --text-secondary: #5C4033;
    --text-tertiary: #8B7355;
    --text-inverse: var(--color-white);

    /* Colors - Border */
    --border-color: #F0D9B5;
    --border-color-hover: #E6C99F;
    --border-color-focus: var(--primary-color);

    /* Typography - Font Families */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: var(--font-primary);
    --font-mono: 'Courier New', Courier, monospace;

    /* Typography - Font Sizes */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */

    /* Typography - Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Typography - Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Spacing Scale */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    --spacing-4xl: 6rem;     /* 96px */

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 0.25rem;    /* 4px */
    --radius-base: 0.375rem; /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;

    /* Z-index Layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 10000;
    --z-modal: 10050;
    --z-toast: 10100;

    /* Container */
    --container-max-width: 1200px;
    --container-padding: var(--spacing-md);

    /* Header */
    --header-height: 70px;
    --logo-height: 50px;
    --hamburger-gap: var(--spacing-xs);
    --hamburger-width: 24px;
    --hamburger-bar-height: 2px;

    /* Product Grid */
    --product-grid-gap: var(--spacing-lg);
    --product-card-padding: var(--spacing-md);

    /* Hero Section */
    --hero-min-height: 500px;
    --hero-mobile-min-height: 400px;
    --hero-gradient-height: 100px;
    --hero-content-max-width: 800px;
    --hero-logo-max-width: 300px;
    --hero-logo-mobile-max-width: 200px;
    --hero-mobile-padding-top-offset: 40px;

    /* Feature Cards */
    --feature-icon-size: 80px;
    --feature-icon-mobile-size: 64px;
    --feature-icon-mobile-svg-size: 32px;

    /* Cart */
    --cart-item-image-width: 120px;
    --cart-item-image-mobile-width: 100px;
    --cart-item-image-xs-width: 75px;
    --quantity-btn-size: 30px;
    --cart-badge-size: 18px;

    /* Contact */
    --contact-icon-size: 48px;

    /* Modal */
    --modal-max-width: 600px;
    --modal-close-size: 36px;
    --modal-close-mobile-size: 40px;
    --modal-close-icon-size: 20px;
    --nav-menu-max-height: 300px;

    /* Checkout Options */
    --checkout-icon-size: 64px;
    --checkout-icon-mobile-size: 56px;

    /* Toast */
    --toast-min-width: 300px;

    /* Dividers & Borders */
    --divider-height: 1px;
    --section-underline-width: 100px;
    --border-accent-height: 4px;
    --nav-underline-height: 2px;
    --btn-border-width-high-contrast: 3px;

    /* Typography */
    --letter-spacing-tight: -0.5px;

    /* Brand Colors */
    --color-whatsapp: #25D366;
    --color-phone: #2563EB;
    --color-email: #EA4335;
}