/* ============================================================
   BARQ Design System — Colors & Typography
   Brand: BARQ (برق) — "lightning" in Arabic
   Bold. Modern. Artistic. Bilingual.
   ============================================================ */

/* -------------------- Fonts -------------------- */

@font-face {
  font-family: "HT Rakik";
  src: url("../fonts/HT-Rakik-Var.ttf") format("truetype-variations"),
       url("../fonts/HT-Rakik-Var.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "HT Rakik";
  src: url("../fonts/HT-Rakik-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face { font-family: "Cairo"; src: url("../fonts/Cairo-ExtraLight.ttf") format("truetype"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("../fonts/Cairo-Light.ttf")      format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("../fonts/Cairo-Regular.ttf")    format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("../fonts/Cairo-Medium.ttf")     format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("../fonts/Cairo-SemiBold.ttf")   format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("../fonts/Cairo-Bold.ttf")       format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("../fonts/Cairo-ExtraBold.ttf")  format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("../fonts/Cairo-Black.ttf")      format("truetype"); font-weight: 900; font-display: swap; }

@font-face {
  font-family: "Bigger Display";
  src: url("../fonts/Bigger-Display.otf") format("opentype");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "BARQ Impact";
  src: url("../fonts/BARQ-Impact.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

/* -------------------- Tokens -------------------- */

:root {
  /* --- Core Palette --- */
  --barq-orange:        #F74E28;  /* brand primary — sampled from logo */
  --barq-orange-hot:    #FF6A3D;  /* hover / highlight */
  --barq-orange-deep:   #D43812;  /* pressed / shadow tone */
  --barq-orange-soft:   #FFE5DC;  /* tinted background */

  --barq-black:         #0A0A0A;  /* near-black; softer than pure */
  --barq-ink:           #151515;  /* surfaces / cards on dark */
  --barq-coal:          #222222;  /* elevated surface on dark */
  --barq-graphite:      #3A3A3A;  /* borders / dividers on dark */

  --barq-white:         #FFFFFF;
  --barq-bone:          #F6F3EE;  /* warm off-white, paper feel */
  --barq-ash:           #E8E4DE;  /* muted warm neutral */
  --barq-stone:         #B8B3AC;  /* secondary on light */
  --barq-smoke:         #6B6762;  /* tertiary on light */

  /* --- Semantic: Foreground --- */
  --fg-1:   var(--barq-black);
  --fg-2:   var(--barq-smoke);
  --fg-3:   var(--barq-stone);
  --fg-inv: var(--barq-bone);
  --fg-accent: var(--barq-orange);

  /* --- Semantic: Background --- */
  --bg-1:   var(--barq-bone);
  --bg-2:   var(--barq-white);
  --bg-3:   var(--barq-ash);
  --bg-inv: var(--barq-black);
  --bg-inv-2: var(--barq-ink);
  --bg-accent: var(--barq-orange);

  /* --- Semantic: Stroke --- */
  --stroke-1: #0A0A0A;
  --stroke-2: rgba(10,10,10,0.12);
  --stroke-3: rgba(10,10,10,0.06);
  --stroke-inv: rgba(255,255,255,0.14);

  /* --- Status (sparingly used) --- */
  --status-ok:   #2E7D3A;
  --status-warn: #E0A024;
  --status-err:  var(--barq-orange-deep);

  /* --- Type Families --- */
  --font-display: "Bigger Display", "BARQ Impact", "HT Rakik", "Cairo", Impact, "Haettenschweiler", "Arial Narrow Bold", system-ui, sans-serif;
  --font-impact:  "BARQ Impact", Impact, "Haettenschweiler", "Arial Narrow Bold", "Cairo", sans-serif;
  --font-sans:    "HT Rakik", "Cairo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic:  "Cairo", "HT Rakik", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* --- Type Scale (desktop) --- */
  --fs-display-xl: clamp(72px, 12vw, 200px);
  --fs-display-l:  clamp(56px, 8vw, 128px);
  --fs-display-m:  clamp(44px, 6vw, 88px);
  --fs-h1:         clamp(36px, 4vw, 56px);
  --fs-h2:         clamp(28px, 3vw, 40px);
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-micro:      11px;

  /* --- Leading / Tracking --- */
  --lh-display: 0.88;
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tr-display: -0.02em;
  --tr-tight:   -0.01em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-mega:    0.12em;

  /* --- Spacing (8px base) --- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* --- Radii --- */
  --r-0:   0;
  --r-1:   2px;
  --r-2:   4px;
  --r-3:   8px;
  --r-pill: 999px;

  /* --- Shadows --- */
  --shadow-1: 0 1px 0 rgba(10,10,10,0.08);
  --shadow-2: 0 4px 0 var(--barq-black);
  --shadow-3: 0 8px 0 var(--barq-black);
  --shadow-orange: 0 6px 0 var(--barq-orange-deep);
  --shadow-float: 0 12px 32px -8px rgba(10,10,10,0.25);

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* -------------------- Semantic element styles -------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--barq-black);
  color: var(--barq-bone);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a:hover { opacity: 0.9; }
::selection { background: var(--barq-orange); color: #fff; }

.display-xl, .display-l, .display-m {
  font-family: var(--font-impact);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}
.display-xl { font-size: var(--fs-display-xl); }
.display-l  { font-size: var(--fs-display-l); }
.display-m  { font-size: var(--fs-display-m); }

h1, .h1 { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); margin: 0; }
h2, .h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); margin: 0; }
h3, .h3 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); margin: 0; }
h4, .h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); margin: 0; }

p, .body { font-size: var(--fs-body); line-height: var(--lh-normal); margin: 0; }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-normal); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tr-mega);
  color: var(--fg-accent);
}

.caption { font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--fg-2); }

code, .mono { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-3); padding: 2px 6px; border-radius: var(--r-1); }

.accent { color: var(--barq-orange); }

/* RTL / Arabic */
[dir="rtl"], .arabic { font-family: var(--font-arabic); }

/* Marquee keyframes (used by Marquee + Clients) */
@keyframes barq-marquee     { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes barq-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes barq-fade-in     { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Mounting helpers */
#barq-root { min-height: 100vh; }
.barq-skeleton { min-height: 100vh; background: var(--barq-black); }

/* Prevent horizontal scroll on any mobile overflow */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; }