/* =============================================
   SHAWARMA CLASSIC — CSS VARIABLES
   THREE COLORS ONLY: #FFFFFF · #E94E1B · #EF7D00
   ============================================= */

:root {
  /* ── THE THREE BRAND COLORS ── */
  --white:   #FFFFFF;
  --brand:   #E94E1B;
  --accent:  #EF7D00;

  /* ── BRAND TINTS (white + brand only) ── */
  --brand-dark:   #C43A10;
  --brand-mid:    rgba(233,78,27,0.15);
  --brand-soft:   rgba(233,78,27,0.08);
  --brand-xsoft:  rgba(233,78,27,0.04);

  /* ── ACCENT TINTS ── */
  --accent-dark:  #C96800;
  --accent-mid:   rgba(239,125,0,0.15);
  --accent-soft:  rgba(239,125,0,0.08);

  /* ── PAGE SURFACES (all white-family) ── */
  --bg:          #FFFFFF;
  --bg-warm:     #FFF8F5;        /* very warm off-white */
  --bg-section:  #FFF3EE;        /* alternate section bg */
  --bg-card:     #FFFFFF;
  --bg-input:    #FFF8F5;

  /* ── TEXT (ink = max-contrast on white) ── */
  --ink:    #1A0800;             /* darkest: near-black with warm tint */
  --ink-80: rgba(26,8,0,0.80);
  --ink-60: rgba(26,8,0,0.60);
  --ink-40: rgba(26,8,0,0.40);
  --ink-20: rgba(26,8,0,0.20);
  --ink-08: rgba(26,8,0,0.08);

  /* ── BORDERS ── */
  --border:        1px solid rgba(233,78,27,0.15);
  --border-soft:   1px solid rgba(26,8,0,0.08);
  --border-brand:  2px solid var(--brand);

  /* ── SHADOWS ── */
  --shadow-sm:    0 1px 6px  rgba(233,78,27,0.10);
  --shadow-md:    0 4px 20px rgba(233,78,27,0.14);
  --shadow-lg:    0 12px 44px rgba(233,78,27,0.18);
  --shadow-brand: 0 4px 22px rgba(233,78,27,0.32);
  --shadow-accent:0 4px 22px rgba(239,125,0,0.28);

  /* ── TYPOGRAPHY ── */
  --font-ar:      'Tajawal', sans-serif;
  --font-en:      'Outfit', sans-serif;
  --font-display: 'Bebas Neue', cursive;

  /* ── LAYOUT ── */
  --nav-h:       72px;
  --section-pad: clamp(72px,9vw,112px);
  --gutter:      clamp(20px,5vw,64px);
  --max-w:       1240px;

  /* ── RADII ── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* ── TRANSITIONS ── */
  --ease:     cubic-bezier(0.16,1,0.3,1);
  --ease-out: cubic-bezier(0,0,0.2,1);
  --dur-fast: 0.16s;
  --dur-med:  0.32s;
  --dur-slow: 0.60s;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[lang="ar"], [lang="ar"] * { font-family: var(--font-ar); }
[lang="en"], [lang="en"] * { font-family: var(--font-en); }

img    { display:block; max-width:100%; }
a      { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
ul,ol  { list-style:none; }
input,textarea,select { font-family:inherit; }

::-webkit-scrollbar       { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--brand); border-radius:var(--r-full); }
::selection { background:var(--brand); color:#fff; }

/* ── UTILITIES ── */
.container { max-width:var(--max-w); margin-inline:auto; padding-inline:var(--gutter); }
.section   { padding-block:var(--section-pad); }

.brand  { color:var(--brand);  }
.accent { color:var(--accent); }
.muted  { color:var(--ink-60); }

.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── REVEAL ANIMATION ── */
.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity var(--dur-slow) var(--ease),
             transform var(--dur-slow) var(--ease);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── SECTION SURFACES ── */
/* White sections:   background:var(--bg)       text:var(--ink)  */
/* Warm sections:    background:var(--bg-section) text:var(--ink) */
/* Brand sections:   background:var(--brand)     text:#fff        */
/* Accent sections:  background:var(--accent)    text:#fff        */

/* Text helpers for colored surfaces */
.on-brand { color:#fff; }
.on-brand .section-eyebrow { color:rgba(255,255,255,0.85); }
.on-brand .section-eyebrow::before { background:rgba(255,255,255,0.60); }
.on-brand .section-title { color:#fff; }
.on-accent { color:#fff; }
.on-accent .section-eyebrow { color:rgba(255,255,255,0.85); }
.on-accent .section-eyebrow::before { background:rgba(255,255,255,0.60); }
.on-accent .section-title { color:#fff; }

/* ── BACKWARDS COMPAT ALIASES ── */
:root {
  --ink-06:  rgba(26,8,0,0.06);
  --ink-12:  rgba(26,8,0,0.12);
  --gray-100: var(--bg-section);
  --gray-200: rgba(26,8,0,0.10);
  --gray-300: var(--ink-40);
  --gray-500: var(--ink-60);
  --gray-700: var(--ink-80);
  --dark:     var(--bg);
  --dark2:    var(--bg-section);
  --dark3:    var(--bg-warm);
  --brand-mid: var(--brand-soft);
}