/* ZahraStyles Hotel Supplies B2B Website - Design System */
/* Based on ZahraStyles_Brochure_final.pdf style system */

:root {
    /* Color Palette */
    --color-primary: #2c3e50;        /* Deep Navy - Professional */
    --color-secondary: #b8860b;      /* Gold Accent - Premium feel */
    --color-accent: #34495e;         /* Dark Blue - Complementary */
    --color-light: #f8f9fa;          /* Light Gray - Background */
    --color-white: #ffffff;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-border: #e0e0e0;
    
    /* Gradients */
    --gradient-gold: linear-gradient(135deg, #d4af37 0%, #b8860b 50%, #996515 100%);
    --gradient-blue: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-secondary: 'Playfair Display', Georgia, serif;
    --font-monospace: 'SF Mono', Monaco, 'Cascadia Mono', monospace;
    
    /* 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 */
    --font-size-5xl: 3rem;       /* 48px */
    
    /* 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 */
    
    /* Border Radius */
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 1rem;       /* 16px */
    --radius-xl: 1.5rem;     /* 24px */
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    
    /* Layout */
    --container-max-width: 1200px;
    --container-padding: 1.5rem;
    --header-height: 4rem;
    --footer-height: 12rem;
    
    /* Z-index layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Responsive Breakpoints */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
@media (min-width: 1536px) { /* 2xl */ }

/* Utility Classes */
.text-gold { color: var(--color-secondary); }
.bg-gold { background-color: var(--color-secondary); }
.bg-light { background-color: var(--color-light); }
.border-gold { border-color: var(--color-secondary); }

/* Typography Scale */
.display-1 {
    font-family: var(--font-secondary);
    font-size: var(--font-size-5xl);
    font-weight: 700;
    line-height: 1.2;
}

.display-2 {
    font-family: var(--font-secondary);
    font-size: var(--font-size-4xl);
    font-weight: 600;
    line-height: 1.25;
}

.h1 { font-size: var(--font-size-3xl); font-weight: 600; }
.h2 { font-size: var(--font-size-2xl); font-weight: 600; }
.h3 { font-size: var(--font-size-xl); font-weight: 600; }
.h4 { font-size: var(--font-size-lg); font-weight: 600; }
.h5 { font-size: var(--font-size-base); font-weight: 600; }
.h6 { font-size: var(--font-size-sm); font-weight: 600; }

.body-lg { font-size: var(--font-size-lg); }
.body-base { font-size: var(--font-size-base); }
.body-sm { font-size: var(--font-size-sm); }
.body-xs { font-size: var(--font-size-xs); }