/* ============================================================
   International Kitchens — العالمية للمطابخ
   Color + Type tokens
   Direction: RTL primary
   ============================================================ */

/* ---------- Brand font ---------- */
@font-face {
  font-family: "Alarabiya";
  src: url('./assets/font/Alarabiya Font Normal.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Latin & fallback web fonts ---------- */
/* Google Fonts loaded non-blocking via <link> tags in each HTML page — do NOT use @import here */

:root {
  /* ============ BRAND COLOR — extracted from logo ============ */
  --gold:           #E8B84A;   /* Primary brand gold (logo) */
  --gold-light:     #F5C95E;   /* Highlight / hover */
  --gold-deep:      #C99529;   /* Pressed / outline */
  --gold-dark:      #8C6515;   /* Antique gold accent */
  --gold-soft:      #F5E4B8;   /* Gold tint background */

  /* ============ NEUTRALS — luxury dark palette ============ */
  --black:          #0A0A0A;   /* True black, page surface */
  --ink:            #141414;   /* Card / surface 1 */
  --ink-2:          #1C1C1C;   /* Surface 2 */
  --ink-3:          #262626;   /* Surface 3 / borders */
  --ink-4:          #3A3A3A;   /* Subdued */
  --smoke:          #6B6B6B;   /* Body on dark */
  --ash:            #A7A7A7;   /* Muted text */
  --bone:           #E9E5DC;   /* Warm off-white text */
  --pearl:          #F7F4ED;   /* Page bg light mode */
  --white:          #FFFFFF;

  /* ============ SEMANTIC ============ */
  --bg:             var(--black);
  --bg-elev:        var(--ink);
  --bg-elev-2:      var(--ink-2);
  --surface-light:  var(--pearl);

  --fg:             var(--bone);
  --fg-strong:      var(--white);
  --fg-muted:       var(--ash);
  --fg-subtle:      var(--smoke);
  --fg-on-gold:     var(--black);
  --fg-on-light:    var(--ink);

  --accent:         var(--gold);
  --accent-hover:   var(--gold-light);
  --accent-press:   var(--gold-deep);

  --border:         #2A2A2A;
  --border-strong:  #3A3A3A;
  --border-gold:    rgba(232, 184, 74, 0.35);
  --hairline:       rgba(255, 255, 255, 0.08);

  --success:        #4FB287;
  --warning:        #E8B84A;
  --danger:         #C9483B;

  /* ============ TYPOGRAPHY ============ */
  /* Arabic primary — Alarabiya (brand identity font) */
  --font-ar-display: "Alarabiya", "Cairo", system-ui, sans-serif;
  --font-ar-body:    "Alarabiya", "Tajawal", system-ui, sans-serif;

  /* Latin */
  --font-lt-serif:   "Playfair Display", "Cormorant Garamond", "Times New Roman", serif;
  --font-lt-sans:    "Inter", "Montserrat", system-ui, -apple-system, sans-serif;

  /* Convenience aliases */
  --font-display:    var(--font-ar-display);
  --font-body:       var(--font-ar-body);
  --font-serif:      var(--font-lt-serif);
  --font-mono:       ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — Alarabiya optical sizing */
  --fs-hero:    clamp(40px, 5.5vw, 80px); /* Hero h1 */
  --fs-h1:      clamp(32px, 4.5vw, 60px);
  --fs-h2:      clamp(24px, 3vw,   42px);
  --fs-h3:      clamp(18px, 2vw,   28px);
  --fs-h4:      18px;
  --fs-lead:    16px;     /* Lead paragraph */
  --fs-body:    15px;
  --fs-small:   13px;
  --fs-micro:   12px;
  --fs-eyebrow: 11px;     /* Tracked uppercase Latin */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.6;      /* Arabic body needs more */
  --lh-loose:   1.85;

  --tracking-tight: -0.01em;
  --tracking-wide:  0.08em;
  --tracking-eye:   0.22em;   /* Latin eyebrows */

  /* ============ SPACING (4px base) ============ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ============ RADII ============ */
  --radius-xs:  4px;     /* Subtle inputs */
  --radius-sm:  8px;     /* Small cards (marble swatches) */
  --radius-md:  12px;    /* Default card */
  --radius-lg:  20px;    /* Hero cards */
  --radius-xl:  32px;
  --radius-pill: 999px;
  --radius-none: 0;

  /* ============ SHADOWS ============ */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:  0 4px 10px rgba(0,0,0,0.35);
  --shadow-md:  0 10px 30px rgba(0,0,0,0.45);
  --shadow-lg:  0 24px 60px rgba(0,0,0,0.55);
  --shadow-gold: 0 14px 40px -8px rgba(232, 184, 74, 0.35);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ============ GRADIENTS ============ */
  --grad-gold:        linear-gradient(135deg, #F5C95E 0%, #E8B84A 45%, #C99529 100%);
  --grad-gold-soft:   linear-gradient(180deg, #E8B84A 0%, #8C6515 100%);
  --grad-ink:         linear-gradient(180deg, #141414 0%, #0A0A0A 100%);
  --grad-hero-fade:   linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
  --grad-protect-bot: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.95) 100%);

  /* ============ MOTION ============ */
  --ease-out-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-back:  cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:    180ms;
  --dur-base:    260ms;
  --dur-slow:    480ms;
  --dur-cinema:  900ms;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html { direction: rtl; }
html[lang="en"], [dir="ltr"] { direction: ltr; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — Arabic Cairo, weight 800 for luxury punch */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
  margin: 0;
}
.h-hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: 1.05;
  color: var(--fg-strong);
  letter-spacing: -0.015em;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-lt-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eye);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--fg);
}

p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
}

small, .small { font-size: var(--fs-small); color: var(--fg-muted); }
.micro { font-size: var(--fs-micro); color: var(--fg-muted); }

/* Latin display serif — for English wordmark/numerals */
.serif {
  font-family: var(--font-lt-serif);
  font-style: italic;
  font-weight: 500;
}

/* Gold-foil text effect — use sparingly on hero numbers */
.text-foil {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-soft);
}
a:hover { color: var(--gold-light); }

/* Selection */
::selection { background: var(--gold); color: var(--black); }