/* ==========================================================================
   variables.css — Design tokens, theming (light/dark), color system
   Basma Interior Design & Decoration
   ========================================================================== */

:root {
  /* --- Brand / accent (warm bronze-caramel, luxury interior palette) --- */
  --accent: #b08968;
  --accent-600: #9c755528;
  --accent-strong: #936f4c;
  --accent-soft: #d8c3ad;
  --accent-tint: rgba(176, 137, 104, 0.12);
  --accent-contrast: #ffffff;

  /* --- Neutral scale --- */
  --cream: #f7f4ef;
  --sand: #efe9e1;
  --stone: #e3dcd1;
  --taupe: #b8ab9c;
  --espresso: #2b2521;
  --charcoal: #1a1a1a;
  --ink: #14110f;

  /* --- Semantic surfaces (light theme defaults) --- */
  --bg: #f7f4ef;
  --bg-alt: #efe9e1;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3eee7;
  --header-bg: rgba(247, 244, 239, 0.82);
  --border: rgba(43, 37, 33, 0.12);
  --border-strong: rgba(43, 37, 33, 0.2);
  --overlay: rgba(20, 17, 15, 0.55);
  --glass: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.5);

  /* --- Text --- */
  --text: #2b2521;
  --text-soft: #5b524a;
  --text-muted: #8a8076;
  --text-invert: #f7f4ef;
  --heading: #1a1a1a;

  /* --- Feedback --- */
  --success: #4f7a55;
  --error: #b3543f;
  --warning: #c79a3c;

  /* --- Typography --- */
  --font-ar-display: "El Messiri", "Tajawal", system-ui, sans-serif;
  --font-ar-body: "Tajawal", system-ui, sans-serif;
  --font-en-display: "Playfair Display", Georgia, serif;
  --font-en-body: "Jost", system-ui, sans-serif;

  --font-display: var(--font-ar-display);
  --font-body: var(--font-ar-body);

  --fs-300: clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);
  --fs-400: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --fs-500: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-600: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
  --fs-700: clamp(1.8rem, 1.4rem + 1.8vw, 2.7rem);
  --fs-800: clamp(2.3rem, 1.6rem + 3vw, 4rem);
  --fs-900: clamp(2.9rem, 1.8rem + 5vw, 5.6rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-base: 1.7;

  --tracking-wide: 0.16em;
  --tracking-wider: 0.28em;

  /* --- Spacing scale --- */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --container: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --header-h: 84px;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-sm: 0 2px 8px rgba(20, 17, 15, 0.06);
  --shadow: 0 14px 40px rgba(20, 17, 15, 0.1);
  --shadow-lg: 0 30px 70px rgba(20, 17, 15, 0.16);
  --shadow-accent: 0 18px 40px rgba(176, 137, 104, 0.3);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.22s;
  --dur: 0.4s;
  --dur-slow: 0.7s;

  --z-header: 1000;
  --z-drawer: 1100;
  --z-loader: 1300;
  --z-modal: 1200;
  --z-toast: 1400;
}

/* --- Dark theme --- */
:root[data-theme="dark"] {
  --bg: #14110f;
  --bg-alt: #1c1815;
  --bg-elevated: #221d19;
  --surface: #211c18;
  --surface-2: #2a241f;
  --header-bg: rgba(20, 17, 15, 0.78);
  --border: rgba(247, 244, 239, 0.12);
  --border-strong: rgba(247, 244, 239, 0.22);
  --overlay: rgba(0, 0, 0, 0.65);
  --glass: rgba(34, 29, 25, 0.55);
  --glass-border: rgba(247, 244, 239, 0.12);

  --text: #ece5dc;
  --text-soft: #c3b8aa;
  --text-muted: #9a8e80;
  --text-invert: #14110f;
  --heading: #f7f4ef;

  --accent: #c8a07c;
  --accent-strong: #d8b48f;
  --accent-tint: rgba(200, 160, 124, 0.16);
  --accent-contrast: #14110f;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.6);
}

/* Latin typography when language = English */
:root[lang="en"] {
  --font-display: var(--font-en-display);
  --font-body: var(--font-en-body);
  --tracking-wide: 0.12em;
}