/* ============================================================
   variables.css — ALL design tokens (single source of truth)
   ============================================================ */

/* ── Local Fonts ────────────────────────────────── */

/* Jozoor — Arabic */
@font-face {
  font-family: 'Jozoor';
  src: url('../font/Jozoor Font.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Cairo — Arabic */
@font-face {
  font-family: 'Cairo';
  src: url('../font/Cairo/static/Cairo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../font/Cairo/static/Cairo-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../font/Cairo/static/Cairo-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../font/Cairo/static/Cairo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Josefin Sans */
@font-face {
  font-family: 'Josefin Sans';
  src: url('../font/JosefinSans-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../font/JosefinSans-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../font/JosefinSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../font/JosefinSans-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../font/JosefinSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../font/JosefinSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../font/JosefinSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../font/JosefinSans-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../font/JosefinSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../font/JosefinSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* === LIGHT MODE (DEFAULT) === */
  --bg-primary:        #FFFFFF;
  --bg-section:        #F7F7F9;
  --bg-surface:        #EFEFF2;
  --text-primary:      #111111;
  --text-secondary:    #666666;
  --border:            #E2E2E6;
  --accent-gold:       #C9A227;
  --accent-gold-hover: #E0B94B;
  --accent-gold-press: #A8841F;
  --shadow-soft:       0 2px 16px rgba(0,0,0,0.07);
  --shadow-elevated:   0 8px 40px rgba(0,0,0,0.12);
  --success:           #16A34A;
  --error:             #DC2626;

  /* === GLASS === */
  --glass-bg:          rgba(201,162,39,0.06);
  --glass-border:      rgba(201,162,39,0.18);

  /* === TRANSITIONS === */
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   600ms cubic-bezier(0.4, 0, 0.2, 1);

  /* === SPACING SCALE === */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;

  /* === BORDER RADIUS === */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* === Z-INDEX SCALE === */
  --z-base:    0;
  --z-float:   10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
  --z-cursor:  9999;

  /* === CONTAINER === */
  --container-max:    1280px;
  --container-pad:    1rem;
}

/* === RESPONSIVE TOKENS === */
@media (min-width: 480px) {
  :root { --container-pad: 1.25rem; }
}
@media (min-width: 768px) {
  :root { --container-pad: 2rem; }
}

/* === DARK MODE === */
[data-theme="dark"] {
  --bg-primary:        #0F1115;
  --bg-section:        #161A20;
  --bg-surface:        #1E232B;
  --text-primary:      #FFFFFF;
  --text-secondary:    #B8BDC7;
  --border:            #2A3038;
  --accent-gold:       #D4AF37;
  --accent-gold-hover: #F1C75B;
  --accent-gold-press: #B8962E;
  --shadow-soft:       0 2px 16px rgba(0,0,0,0.3);
  --shadow-elevated:   0 8px 40px rgba(0,0,0,0.5);
  --success:           #2ECC71;
  --error:             #E74C3C;
  --glass-bg:          rgba(212,175,55,0.07);
  --glass-border:      rgba(212,175,55,0.20);
}

/* === TYPOGRAPHY — Josefin Sans (LTR) / Cairo (RTL) === */
html {
  font-family: 'Josefin Sans', sans-serif;
  --font-heading: 'Josefin Sans', sans-serif;
  --font-body:    'Josefin Sans', sans-serif;
  --font-accent:  'Josefin Sans', sans-serif;
  --letter-spacing-heading: 0.04em;
  --letter-spacing-body:    0.02em;
  --line-height:  1.7;
  --font-size-hero: clamp(2.5rem, 5.5vw, 4.5rem);
}

html[lang="ar"],
html[dir="rtl"] {
  font-family: 'Cairo', sans-serif;
  -webkit-locale: 'ar';
  --font-heading: 'Cairo', sans-serif;
  --font-body:    'Cairo', sans-serif;
  --font-accent:  'Cairo', sans-serif;
  --letter-spacing-heading: 0;
  --letter-spacing-body:    0;
  --line-height:  1.9;
  --font-size-hero: clamp(2rem, 5vw, 3.5rem);
}

/* iOS Safari sometimes needs an explicit body override to
   pick up the font-family change from the html element */
html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: 'Cairo', sans-serif;
}