/* Brand fonts, self-hosted (OFL). No third-party requests: faster, CSP-friendly, no visitor IPs sent to Google. */
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   RetailHub — COLORS
   Brand: vivid azure on a deep blue-black. Technical, precise,
   high-contrast. Sampled directly from retailhub.ae.
   ============================================================ */
:root {
  /* ---- Brand blue (signature accent) ------------------------ */
  --blue-50:  #e6f6ff;
  --blue-100: #b9e6ff;
  --blue-200: #8bd6ff;
  --blue-300: #59c7fc;  /* hero heading highlight */
  --blue-400: #2ba8f5;
  --blue-500: #10adff;  /* PRIMARY — logo, links, focus */
  --blue-600: #0a8fe0;  /* hover / pressed */
  --blue-700: #0a6fb0;
  --blue-800: #0a4f7d;
  --blue-900: #0a3350;

  /* ---- Ink / blue-black neutrals ---------------------------- */
  --ink-1000: #010407;  /* deepest — page corners */
  --ink-950:  #020509;  /* page base */
  --ink-900:  #050b14;  /* base alt */
  --ink-850:  #08111d;  /* raised surface */
  --ink-800:  #0d1826;  /* card */
  --ink-700:  #142336;  /* card hover / border-strong */
  --ink-600:  #1d3147;  /* hairline on dark */
  --ink-500:  #2c425c;
  --ink-400:  #475d78;  /* disabled text */
  --ink-300:  #6b7c92;  /* dim text */
  --ink-200:  #9aa6b5;  /* secondary text */
  --ink-100:  #b3b7bd;  /* body text (sampled) */
  --ink-50:   #d8dde4;
  --white:    #ffffff;
  --off-white:#f4f7fa;

  /* ---- Semantic (status) ------------------------------------ */
  --green-500:  #2fd07a;  /* in stock / healthy */
  --amber-500:  #ffb020;  /* low stock / warning */
  --red-500:    #ff5a5f;  /* out of stock / error */
  --green-bg:   #0e2a1e;
  --amber-bg:   #2e2410;
  --red-bg:     #2e1416;

  /* ============================================================
     SEMANTIC ALIASES — use these in product code.
     ============================================================ */
  --bg-base:        var(--ink-950);
  --bg-deep:        var(--ink-1000);
  --bg-raised:      var(--ink-850);
  --surface-card:   var(--ink-800);
  --surface-hover:  var(--ink-700);

  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.16);
  --border-blue:    rgba(16,173,255,0.45);

  --text-strong:    var(--white);
  --text-body:      var(--ink-100);
  --text-secondary: var(--ink-200);
  --text-dim:       var(--ink-300);
  --text-disabled:  var(--ink-400);
  --text-accent:    var(--blue-500);
  --text-on-accent: var(--ink-1000);

  --accent:         var(--blue-500);
  --accent-hover:   var(--blue-600);
  --focus-ring:     var(--blue-500);

  /* ---- Signature gradients & glows -------------------------- */
  --glow-blue: radial-gradient(60% 80% at 85% 95%,
                  rgba(16,173,255,0.45) 0%,
                  rgba(16,173,255,0.12) 35%,
                  rgba(2,5,9,0) 70%);
  --hero-bg: radial-gradient(120% 90% at 80% 100%,
                  rgba(16,173,255,0.30) 0%,
                  rgba(10,79,125,0.10) 30%,
                  var(--ink-950) 62%);
  --accent-gradient: linear-gradient(135deg, var(--blue-300), var(--blue-500));
}
/* ============================================================
   RetailHub — TYPOGRAPHY
   Brand face: Montserrat (geometric sans). Display weights are
   heavy (700/800), tight tracking. Body is 400/500.
   Mono: JetBrains Mono for data, metrics, code, annotations.
   ============================================================ */
:root {
  --font-brand: "Montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-body:  "Montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Weights --------------------------------------------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ---- Type scale (fluid-friendly fixed px) ---------------- */
  --fs-display:  72px;  /* hero headline */
  --fs-h1:       54px;
  --fs-h2:       40px;
  --fs-h3:       30px;
  --fs-h4:       24px;
  --fs-lead:     22px;  /* hero subhead / lead paragraph */
  --fs-lg:       18px;
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-xs:       12px;
  --fs-eyebrow:  13px;  /* uppercase labels */

  /* ---- Line heights ---------------------------------------- */
  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* ---- Letter spacing -------------------------------------- */
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body:    0;
  --ls-eyebrow: 0.14em;  /* wide tracking for uppercase eyebrows */
  --ls-mono:    0.02em;
}
/* ============================================================
   RetailHub — SPACING, RADII, LAYOUT
   8px base grid. Generous section rhythm for marketing.
   ============================================================ */
:root {
  --space-0:   0;
  --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-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;   /* buttons, chips — the brand uses fully-rounded CTAs */
  --radius-card: 16px;

  /* ---- Layout ---------------------------------------------- */
  --container-max: 1200px;
  --container-pad: 24px;
  --section-y:     96px;

  /* ---- Borders --------------------------------------------- */
  --border-w: 1px;
}
/* ============================================================
   RetailHub — EFFECTS: shadows, glows, blur, motion
   On a dark UI, elevation reads through glow + hairline borders
   more than drop shadow. Keep shadows deep and soft.
   ============================================================ */
:root {
  /* ---- Shadows (for raised cards / popovers on dark) ------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:  0 20px 50px rgba(0,0,0,0.55);
  --shadow-xl:  0 30px 80px rgba(0,0,0,0.6);

  /* ---- Accent glow (focus, active CTAs, key data) --------- */
  --glow-sm: 0 0 0 1px rgba(16,173,255,0.35), 0 4px 18px rgba(16,173,255,0.25);
  --glow-md: 0 0 30px rgba(16,173,255,0.35);
  --glow-lg: 0 0 60px rgba(16,173,255,0.45);
  --focus-ring-shadow: 0 0 0 3px rgba(16,173,255,0.35);

  /* ---- Glass / blur ---------------------------------------- */
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --glass-bg: rgba(13,24,38,0.6);

  /* ---- Motion ---------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
}