/* ==========================================================================
   Design System Variables & Color Presets - Lexa Furniture Luxury Theme
   Supports Dynamic Color Palette Profiles (Charcoal/Gold, Navy/Azure, etc.)
   ========================================================================== */

:root,
[data-theme="charcoal-gold"] {
  /* Preset 1: Charcoal & Champagne Gold (Default Luxury) */
  --color-primary: #191816;          /* Deep matte charcoal */
  --color-primary-light: #2c2a27;
  --color-accent: #c49a6c;           /* Warm champagne gold */
  --color-accent-hover: #b08556;
  --color-accent-light: #f5ede4;
  
  --color-bg-main: #fcfbf9;          /* Ultra soft cream / warm alabaster */
  --color-bg-secondary: #f4f1ec;     /* Warm limestone */
  --color-bg-surface: #ffffff;
  --color-bg-dark: #141311;          /* Dark rich footer & hero backdrop */

  --color-text-main: #1e1d1b;
  --color-text-muted: #6f6b64;
  --color-text-light: #9e9990;
  --color-text-inverse: #f9f8f5;

  --color-border: #e8e4dc;
  --color-border-light: #f0ece5;
  --color-border-dark: #33302b;

  --color-success: #386641;
  --color-success-bg: #eaf4ed;
  --color-sale: #b33927;
  --color-sale-bg: #faedea;
}

/* Preset 2: Midnight Navy & Azure Sky (كحلي ملكي وسماوي فاخر) */
[data-theme="navy-azure"] {
  --color-primary: #0c182b;          /* Deep Royal Midnight Navy */
  --color-primary-light: #182c4b;
  --color-accent: #2e9ad0;           /* Radiant Azure / Sky Blue */
  --color-accent-hover: #1f82b4;
  --color-accent-light: #e5f3fa;
  
  --color-bg-main: #f7fafc;          /* Pure crisp alabaster with cool undertone */
  --color-bg-secondary: #ebf2f7;     /* Slate mist */
  --color-bg-surface: #ffffff;
  --color-bg-dark: #08101e;          /* Rich Navy Black footer & backdrop */

  --color-text-main: #111a29;
  --color-text-muted: #5e6c84;
  --color-text-light: #899ab4;
  --color-text-inverse: #f4f8fc;

  --color-border: #d4e1ed;
  --color-border-light: #e6eef5;
  --color-border-dark: #172842;

  --color-success: #207a60;
  --color-success-bg: #e6f6f1;
  --color-sale: #c53030;
  --color-sale-bg: #ffe8e8;
}

/* Preset 3: Nordic Pine & Sage Green (أخضر نوردي وميرمية) */
[data-theme="forest-sage"] {
  --color-primary: #15271d;          /* Deep Nordic Pine */
  --color-primary-light: #243e30;
  --color-accent: #5e8c6b;           /* Elegant Sage Green */
  --color-accent-hover: #4c7357;
  --color-accent-light: #edf5ef;
  
  --color-bg-main: #fafbf9;
  --color-bg-secondary: #edf2ed;
  --color-bg-surface: #ffffff;
  --color-bg-dark: #0d1912;

  --color-text-main: #18241d;
  --color-text-muted: #5c6e61;
  --color-text-light: #899e90;
  --color-text-inverse: #f4f8f5;

  --color-border: #d9e4db;
  --color-border-light: #e9f0ea;
  --color-border-dark: #1e3326;
}

/* Preset 4: Desert Terracotta & Warm Sand (تيراكوتا إيطالي ورمل دافئ) */
[data-theme="terracotta-sand"] {
  --color-primary: #271a15;          /* Deep Espresso Earth */
  --color-primary-light: #3f2c24;
  --color-accent: #bf6448;           /* Warm Terracotta */
  --color-accent-hover: #a65239;
  --color-accent-light: #faeee9;
  
  --color-bg-main: #fdfbf9;
  --color-bg-secondary: #f6efe8;
  --color-bg-surface: #ffffff;
  --color-bg-dark: #180f0b;

  --color-text-main: #241712;
  --color-text-muted: #735d54;
  --color-text-light: #a38c82;
  --color-text-inverse: #faf6f4;

  --color-border: #eadad2;
  --color-border-light: #f4eae4;
  --color-border-dark: #322019;
}

:root {
  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent: 'Cinzel', serif;

  /* Font Sizes */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.84375rem; /* 13.5px */
  --text-base: 0.9375rem;/* 15px */
  --text-md: 1.0625rem;  /* 17px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 1.875rem;  /* 30px */
  --text-3xl: 2.375rem;  /* 38px */
  --text-4xl: 3.125rem;  /* 50px */
  --text-5xl: 4rem;      /* 64px */

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  /* Layout */
  --container-max-width: 1440px;
  --container-padding: 2rem;
  --header-height: 84px;
  --announcement-height: 38px;

  /* Radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: 0 2px 10px rgba(12, 24, 43, 0.04);
  --shadow-sm: 0 4px 16px rgba(12, 24, 43, 0.06);
  --shadow-md: 0 8px 30px rgba(12, 24, 43, 0.09);
  --shadow-lg: 0 16px 45px rgba(12, 24, 43, 0.13);
  --shadow-floating: 0 24px 60px rgba(12, 24, 43, 0.18);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-Indices */
  --z-header: 100;
  --z-dropdown: 150;
  --z-overlay: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}