/* ============================================================
   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 ---- */
  --brand:        #16213A;   /* Customer NAVY (from logo) */
  --brand-press:  #0F1A30;
  --brand-tint:   #E9ECF3;
  --driver:       #F97316;   /* Driver ORANGE  */
  --driver-press: #EA580C;
  --driver-tint:  #FFF3EA;
  /* ---- Orange pop (promos / deals / accents on dark) ---- */
  --pop:        #F97316;
  --pop-press:  #E5640A;
  --pop-tint:   #FFF1E7;
  --green:        #15803D;   /* success / status green */
  --green-press:  #136A34;
  --green-tint:   #E9F6EE;

  /* ---- 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;
  --ink-2:   #515C6E;
  --ink-3:   #98A1B0;
  --ink-4:   #C2C8D2;

  /* ---- Surfaces ---- */
  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F5F6F8;
  --surface-3: #EDEFF3;
  --line:      #E8EAEF;
  --line-2:    #F0F1F4;

  /* Splash / hero dark canvas */
  --splash-bg:   #0E1726;
  --splash-bg-2: #16223A;
  --splash-ink:  #FFFFFF;

  /* ---- Typography ---- */
  --font: 'IBM Plex Sans Arabic', 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,24,40, calc(0.05 * var(--shadow-k)));
  --shadow-md: 0 6px 18px rgba(16,24,40, calc(0.07 * var(--shadow-k)));
  --shadow-lg: 0 18px 38px rgba(16,24,40, calc(0.12 * var(--shadow-k)));
  --shadow-up: 0 -6px 22px rgba(16,24,40, calc(0.06 * var(--shadow-k)));

  /* ---- Device ---- */
  --device-w: 390px;
  --device-h: 844px;
  --bezel: #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;
}