/**
 * Design System Variables
 * Generated from design_system.json
 * Ashrey Natural Beauty Content Hub
 * 
 * @package Ashrey_Natural
 * @version 1.0.0
 */

:root {
    /* ========================================
       Colors - Primary
       ======================================== */
    --color-primary: #911b30;
    --color-primary-dark: #6b000a;
    --color-primary-light: #b74156;
    --color-secondary: #7FB069;
    --color-secondary-dark: #2D5016;
    --color-primary-reverse: #ffe7fc;
    
    /* ========================================
       Colors - Accent
       ======================================== */
    --color-accent-sage: #9CAF88;
    --color-accent-forest: #2D5016;
    --color-accent-sand: #E8DCC0;
    --color-accent-olive: #556B2F;
    
    /* ========================================
       Colors - Background (Modern Strategy)
       ======================================== */
    /* Primary Backgrounds - White & Neutrals */
    --color-background-primary: #ffffff;
    --color-background-secondary: #fafafa;
    --color-background-header: #ffffff;
    --color-background-product: #ffffff;
    --color-background-footer: #9bc347;
    --color-background-footer-curve: #a9d65a;
    --color-background-bottom-footer: #8fb73d;
    --color-background-bottom-nav: #ffffff;
    
    /* Soft Tints - Modern & Clean */
    --color-background-pink-50: #fef5f7;      /* Softest pink - hero sections */
    --color-background-pink-100: #fce8ed;     /* Light pink - subtle accents */
    --color-background-pink-200: #f9d1db;     /* Subtle pink - hover states */
    --color-background-green-50: #f3f8f0;     /* Softest green - success areas */
    --color-background-green-100: #e6f2e0;    /* Light green - benefits */
    --color-background-green-light: #f0f9f4;  /* Light green gradient */
    --color-background-blue-light: #f0f7ff;   /* Light blue - info sections */
    --color-background-warning-light: #fff8f0;/* Light orange - warnings */
    --color-background-warm: #fdf6f8;         /* Warm white with pink tint */
    --color-background-cream: #fafaf8;        /* Neutral cream */
    
    /* Accent Backgrounds - Use Sparingly */
    --color-background-countdown: #911b30;    /* Only for countdown */
    
    /* ========================================
       Colors - Text (Optimized for White Backgrounds)
       ======================================== */
    --color-text-primary: #000000;            /* Pure black - maximum contrast */
    --color-text-secondary: #4b5563;          /* Gray - supporting text */
    --color-text-header: #911b30;             /* Burgundy - headings */
    --color-text-footer: #ffffff;             /* White - footer */
    --color-text-bottom-nav: #000000;         /* Black - navigation */
    --color-text-countdown: #ffffff;          /* White - on burgundy */
    --color-text-muted: #6b7280;              /* Light gray - subtle text */
    --color-text-accent: #911b30;             /* Burgundy - accents */
    --color-text-on-primary: #ffffff;         /* White - on burgundy backgrounds */
    
    /* ========================================
       Colors - Border (Clean & Subtle)
       ======================================== */
    --color-border-primary: #911b30;          /* Burgundy - accent borders */
    --color-border-product: #eeeeee;          /* Light gray - product cards */
    --color-border-countdown: #911b30;        /* Burgundy - countdown */
    --color-border-subtle: #f5f5f5;           /* Very light - sections */
    --color-border-accent: #911b30;           /* Burgundy - highlights */
    
    /* ========================================
       Colors - Utility (Semantic Colors)
       ======================================== */
    --color-success: #10b981;                 /* Green - success states */
    --color-success-light: #d1fae5;           /* Light green - success bg */
    --color-warning: #f59e0b;                 /* Orange - warnings */
    --color-warning-light: #fef3c7;           /* Light orange - warning bg */
    --color-error: #ef4444;                   /* Red - errors */
    --color-error-light: #fee2e2;             /* Light red - error bg */
    --color-info: #3b82f6;                    /* Blue - information */
    --color-info-light: #dbeafe;              /* Light blue - info bg */
    
    /* ========================================
       Colors - Buttons
       ======================================== */
    --color-button-primary-bg: #911b30;
    --color-button-primary-text: #FFFFFF;
    --color-button-secondary-bg: #2D5016;
    --color-button-secondary-text: #FFFFFF;
    --color-button-whatsapp-bg: #25D366;
    --color-button-whatsapp-text: #FFFFFF;
    
    /* ========================================
       Typography - Font Family
       ======================================== */
    --font-family-main: 'Almarai', sans-serif;
    
    /* ========================================
       Typography - Font Sizes
       ======================================== */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    
    /* ========================================
       Typography - Font Weights
       ======================================== */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ========================================
       Typography - Line Heights
       ======================================== */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* ========================================
       Spacing
       ======================================== */
    --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 */
    
    /* ========================================
       Layout
       ======================================== */
    --container-max-width: 100%;
    --layout-container-max-width: 1280px;  /* Design system max width */
    --product-image-height: 17rem;  /* 272px */
    --product-per-row: 4;
    
    /* ========================================
       Border Radius
       ======================================== */
    --radius-none: 0;
    --radius-sm: 0.25rem;     /* 4px */
    --radius-md: 0.375rem;    /* 6px */
    --radius-lg: 0.5rem;      /* 8px */
    --radius-xl: 0.75rem;     /* 12px */
    --radius-full: 9999px;
    
    /* Design System Border Radius Tokens */
    --border-radius-sm: 0.25rem;     /* 4px */
    --border-radius-md: 0.375rem;    /* 6px */
    --border-radius-lg: 0.5rem;      /* 8px */
    --border-radius-xl: 0.75rem;     /* 12px */
    
    /* ========================================
       Shadows (Branded with burgundy tint)
       ======================================== */
    --shadow-sm: 0 1px 2px 0 rgba(145, 27, 48, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(145, 27, 48, 0.08), 0 2px 4px -1px rgba(145, 27, 48, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(145, 27, 48, 0.1), 0 4px 6px -2px rgba(145, 27, 48, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(145, 27, 48, 0.12), 0 10px 10px -5px rgba(145, 27, 48, 0.06);
    --shadow-primary: 0 8px 24px rgba(145, 27, 48, 0.15);  /* Brand shadow for accent cards */
    
    /* ========================================
       Transitions
       ======================================== */
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;
    
    /* ========================================
       Breakpoints (for JavaScript)
       ======================================== */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1200px;
}

/* ========================================
   RTL Support Variables
   ======================================== */
[dir="rtl"] {
    /* RTL-specific adjustments can be added here */
    --text-direction: rtl;
}

[dir="ltr"] {
    --text-direction: ltr;
}