/**
 * Jawhara Establishment Luxury Website - Design Tokens & CSS Variables
 * مؤسسة جوهرة للمقاولات والتشطيبات الفاخرة — باليتة الألوان المعمارية المعتمدة
 */

:root {
  /* ==========================================================================
     Color Palette: Deep Black Marble, Radiant Gold, Warm Walnut, Greige Stone
     ========================================================================== */
  
  /* Primary Marble Backgrounds & Surfaces */
  --color-marble-black: #0D0D11;
  --color-marble-dark: #121218;
  --color-marble-surface: #16161D;
  --color-marble-elevated: #1E1E28;
  --color-marble-border: #2B2B38;
  --color-marble-border-light: rgba(212, 175, 55, 0.2);

  /* Radiant Metallic Gold Accents & Trims */
  --color-gold-radiant: #D4AF37;
  --color-gold-warm: #C5A059;
  --color-gold-highlight: #F7D070;
  --color-gold-dark: #997A24;
  --color-gold-glow: rgba(212, 175, 55, 0.35);
  --gold: #D4AF37;

  /* Natural Warm Walnut & Treated Woods (WPC) */
  --color-wood-walnut: #8B5A2B;
  --color-wood-deep: #5C3A21;
  --color-wood-oak: #B3885C;
  --color-wood-glow: rgba(139, 90, 43, 0.3);

  /* High-Contrast Greige, Off-White & Neutral Text */
  --color-greige-offwhite: #F8F9FA;
  --color-greige-stone: #EAE6DF;
  --color-muted: #9E9EA8;
  --color-muted-dark: #6C6C78;

  /* Status & Accents */
  --color-success: #10B981;
  --color-success-bg: rgba(16, 185, 129, 0.12);
  --color-error: #EF4444;
  --color-error-bg: rgba(239, 68, 68, 0.12);
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #20BA5A;

  /* ==========================================================================
     Typography System (Arabic RTL Priority)
     ========================================================================== */
  --font-primary: 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Tajawal', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type Scale */
  --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 */
  --font-size-hero: clamp(2.25rem, 5vw + 1rem, 4rem);

  /* ==========================================================================
     Layout, Spacing & Container Constraints
     ========================================================================== */
  --container-max: 1440px;
  --container-pad: clamp(1rem, 3vw, 2.5rem);
  --header-height: 80px;
  --mobile-bar-height: 68px;

  /* Radius Tokens */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Shadows & Depth */
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-elevated: 0 12px 35px rgba(0, 0, 0, 0.65);
  --shadow-gold: 0 8px 30px rgba(212, 175, 55, 0.22);
  --shadow-gold-hover: 0 12px 40px rgba(212, 175, 55, 0.4);

  /* Transitions & Animations */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-sticky: 100;
  --z-floating: 200;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}