/* ============================================
   ZAYAN Interior Design - CSS Variables
   Foundation: Colors, Typography, Spacing
   Design language adapted from Strategy template
   ============================================ */

:root {
  /* Color Palette - Premium Black, Charcoal and Refined Gold */
  --color-primary: #0b0b0c; /* Main background */
  --color-primary-rgb: 11 11 12;
  --color-secondary: #111214; /* Secondary sections */
  --color-tertiary: #17181a; /* Cards and surfaces */
  --color-elevated: #1d1e20; /* Elevated surfaces */
  --color-gold: #c9a24d; /* Primary accent */
  --color-gold-bright: #d8b45a; /* Hover and emphasis accent */
  --color-gold-dark: #9f7a2f; /* Dark accent */
  --color-gold-rgb: 201 162 77;
  --color-white: #f5f3ee; /* Main text */
  --color-gray: #b8b5ae; /* Secondary text */
  --color-gray-dark: #77746e; /* Muted text */
  --color-error: #d56a6a;
  --color-border: rgba(255, 255, 255, 0.08); /* Subtle neutral border */
  --color-border-light: rgba(255, 255, 255, 0.04); /* Light border */
  --color-border-gold: rgba(201, 162, 77, 0.18); /* Restrained gold border */
  --color-overlay: rgba(11, 11, 12, 0.82); /* Overlays */

  /* Semantic aliases for shared color usage */
  --color-bg-primary: var(--color-primary);
  --color-bg-secondary: var(--color-secondary);
  --color-surface: var(--color-tertiary);
  --color-surface-elevated: var(--color-elevated);
  --color-gold-light: var(--color-gold-bright);
  --color-text-primary: var(--color-white);
  --color-text-secondary: var(--color-gray);
  --color-text-muted: var(--color-gray-dark);

  /* Typography - Scale (Strategy-inspired) */
  --fs-h1: clamp(2.5rem, 6vw, 5rem);
  --fs-h2: clamp(2rem, 5vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 4vw, 2.25rem);
  --fs-h4: clamp(1.25rem, 3vw, 1.75rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;
  --fs-eyebrow: 0.8125rem;

  /* Typography - Font Families (Strategy-inspired) */
  --font-primary:
    "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; /* English body */
  --font-heading: "Nunito Sans", sans-serif; /* Headings */
  --font-nav: "Raleway", sans-serif; /* Navigation */
  --font-secondary: "Cairo", sans-serif; /* Arabic */
  --font-mono: "Courier New", monospace;

  /* Typography - Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Line Height */
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;
  --lh-loose: 2;

  /* Letter Spacing */
  --ls-tight: 0em;
  --ls-normal: 0em;
  --ls-wide: 0.05em;
  --ls-wider: 0.1em;
  --ls-widest: 0.2em;
  --ls-eyebrow: 0.18em;

  /* Spacing Scale */
  --spacing-2xs: 0.125rem; /* 2px */
  --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: 5rem; /* 80px */
  --spacing-5xl: 6rem; /* 96px */
  --spacing-6xl: 7.5rem; /* 120px */
  --spacing-7xl: 10rem; /* 160px */
  --spacing-8xl: 12.5rem; /* 200px */

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.4);
  --shadow-gold: 0 0 20px rgba(201, 162, 77, 0.12);
  --shadow-gold-strong: 0 0 30px rgba(201, 162, 77, 0.18);

  /* Border Radius (Strategy-inspired) */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-pill: 50px; /* Strategy pill buttons */
  --radius-full: 9999px;

  /* Transitions & Animations */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  --transition-slower: 500ms ease-in-out;
  --motion-duration: 600ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Scale */
  --z-hide: -1;
  --z-auto: auto;
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-popover: 400;
  --z-notification: 500;
  --z-tooltip: 600;

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1320px; /* Bootstrap container-xl */
  --container-max: 100%;

  /* Breakpoints (for reference in JavaScript) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1536px;
}

/* ============================================
   RTL (Arabic) Layout Support
   ============================================ */

html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

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