/* ============================================================
   SHIPNEX — Design Tokens (single source of truth)
   Every value is a CSS variable so the whole ecosystem can be
   re-themed globally from the Tweaks panel.
   ============================================================ */
:root {
  /* ---- Brand ----
     ج١ (09-05): every value below is now a SHIPNEX_Color_Tokens.json colour, or an rgba() of one
     for a wash/tint that used to be its own invented pastel — see colours-are-the-packs.test.mjs. */
  --brand:        #1A2235;   /* pack navy-800 (was a one-off #16213A) */
  --brand-press:  #101626;   /* pack navy — darker than --brand for a pressed state */
  --brand-tint:   rgba(16, 22, 38, .08);
  --driver:       #F97316;   /* pack orange — already exact */
  --driver-press: #DC5F08;   /* pack orange-600 */
  --driver-tint:  #FFEDD5;   /* pack orange-100 */
  /* ---- Orange pop (promos / deals / accents on dark) ---- */
  --pop:        #F97316;     /* pack orange */
  --pop-press:  #DC5F08;     /* pack orange-600 */
  --pop-tint:   rgba(249, 115, 22, .12);
  --green:        #12805C;   /* pack success (was a one-off #15803D) */
  --green-press:  #12805C;   /* the pack carries one green; no darker shade to press to */
  --green-tint:   rgba(18, 128, 92, .05);

  /* ---- Active accent (defaults to customer; .theme-driver overrides) ---- */
  --accent:       var(--brand);
  --accent-press: var(--brand-press);
  --accent-tint:  var(--brand-tint);
  --on-accent:    #ffffff;

  /* ---- Ink / neutrals (warm-cool neutral) ---- */
  --ink:     #101626;   /* pack navy */
  --ink-2:   #697586;   /* pack grey-500 (was #515C6E) — 4.68:1 on white, the site's own standing call */
  --ink-3:   #2B3444;   /* pack grey-800, NOT grey-500 (was #646e7d) — grey-500 only clears 4.40:1 on
                           --surface-2/grey-50, short of AA; site.css/index.html settled this exact
                           shortfall the same way (site-token-drift-is-frozen.mjs enforces it) */
  --ink-4:   #E4E7EC;   /* pack grey-200 (was a lighter one-off #C2C8D2) */

  /* ---- Surfaces ---- */
  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F7F8FA;   /* pack grey-50 (was #F5F6F8) */
  --surface-3: #E4E7EC;   /* pack grey-200 (was #EDEFF3) */
  --line:      #E4E7EC;   /* pack grey-200 (was #E8EAEF) */
  --line-2:    #F7F8FA;   /* pack grey-50 (was #F0F1F4) */

  /* Splash / hero dark canvas */
  --splash-bg:   #101626;   /* pack navy (was #0E1726) */
  --splash-bg-2: #1A2235;   /* pack navy-800 (was #16223A) */
  --splash-ink:  #FFFFFF;

  /* ---- Typography ---- */
  --font: 'Almarai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: 30px;
  --fs-h1: 24px;
  --fs-h2: 20px;
  --fs-title: 17px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 11px;
  --fw-reg: 400;
  --fw-med: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --lh: 1.55;
  --tracking: 0px;

  /* ---- Spacing scale ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px;
  --gutter: 18px;            /* screen side padding */

  /* ---- Radius ---- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;
  --r-card: 20px;
  --r-btn: 16px;

  /* ---- Shadow (intensity scaled by --shadow-k) ---- */
  --shadow-k: 1;
  --shadow-sm: 0 1px 2px rgba(16,22,38, calc(0.05 * var(--shadow-k)));
  --shadow-md: 0 6px 18px rgba(16,22,38, calc(0.07 * var(--shadow-k)));
  --shadow-lg: 0 18px 38px rgba(16,22,38, calc(0.12 * var(--shadow-k)));
  --shadow-up: 0 -6px 22px rgba(16,22,38, calc(0.06 * var(--shadow-k)));

  /* ---- Device ---- */
  --device-w: 390px;
  --device-h: 844px;
  --bezel: #101626;   /* pack navy (was a near-black one-off #0d0f14) */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .42s;
}

/* Driver theme — flip the accent to green wherever applied */
.theme-driver {
  --accent:       var(--driver);
  --accent-press: var(--driver-press);
  --accent-tint:  var(--driver-tint);
  --on-accent:    #ffffff;
}