/* SafeDest Design System — light glass theme (logo brand colors). ALL pages import this first. */
:root {
  /* surfaces — light gray canvas, white panels */
  --bg: #eef1f5;
  --bg-2: #e4e8ef;
  --panel: #ffffff;
  --panel-2: rgba(17,20,30,.05);
  --line: rgba(17,20,30,.12);
  --line-soft: rgba(17,20,30,.07);

  /* ink — dark slate on light */
  --ink: #1a1f2e;
  --muted: #5c6b85;
  --faint: #9aa5bc;

  /* brand — from official logo */
  --red: #cc1f2e;
  --red-deep: #8c1a22;
  --red-glow: rgba(204,31,46,.26);
  --brand-gray: #6f7073;
  --amber: #e0900f;
  --cyan: #1a8ccc;
  --green: #1db36a;
  --purple: #8050d0;

  /* vehicle type colors (single source of truth) */
  --v-satha: #cc1f2e;     /* سطحة Flatbed */
  --v-reefer: #1a8ccc;    /* ثلاجة Reefer */
  --v-container: #e0900f; /* كونتينر Container */
  --v-dina: #1db36a;      /* دينا Dina */
  --v-lowbed: #8050d0;    /* لوبد Lowbed */

  /* type */
  --font-en: "Outfit", sans-serif;
  --font-ar: "IBM Plex Sans Arabic", sans-serif;

  /* glass — truly translucent frosted: see the moving map through, text stays sharp */
  --glass: rgba(255,255,255,.24);
  --glass-strong: rgba(255,255,255,.34);
  --glass-mid: rgba(255,255,255,.16);
  --glass-light: rgba(255,255,255,.10);
  --blur: saturate(180%) blur(16px);
  --blur-glass: saturate(180%) blur(16px);
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.55);
  /* faint brand-red sheen layered over glass cards */
  --card-tint: linear-gradient(135deg, rgba(204,31,46,.10) 0%, rgba(204,31,46,.03) 50%, rgba(255,255,255,0) 100%);

  /* fx */
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 8px 28px rgba(17,20,30,.10);
  --shadow-glow: 0 0 24px var(--red-glow);
  --ease: cubic-bezier(.22, .9, .26, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ar);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[lang="en"], .en { font-family: var(--font-en); }

/* shared UI atoms */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  color: var(--ink); font: 600 14px var(--font-en);
  letter-spacing: .4px; cursor: pointer; text-decoration: none;
  transition: all .25s var(--ease);
}
.btn:hover { border-color: var(--red); box-shadow: var(--shadow-glow); transform: translateY(-1px); }
.btn.primary { background: linear-gradient(135deg, var(--red), var(--red-deep)); border: 0; color: #fff; }
.btn.primary:hover { filter: brightness(1.06); box-shadow: 0 6px 22px var(--red-glow); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font: 700 11.5px var(--font-en);
  letter-spacing: .8px; text-transform: uppercase;
  background: var(--glass-mid); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line); color: var(--muted);
}

/* frosted glass card — faint red sheen, reveals the live map behind */
.card {
  background: var(--card-tint), var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), var(--glass-hi);
}

.glass {
  background: var(--glass-mid);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,.5);
}

/* status colors */
.st-pickup   { color: var(--amber); }
.st-transit  { color: var(--cyan); }
.st-customs  { color: var(--purple); }
.st-delivered { color: var(--green); }
.st-alert    { color: var(--red); }

/* language toggle (kept from i18n layer) */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--glass-mid); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line); color: var(--muted);
  font: 700 13px var(--font-en); cursor: pointer; transition: .2s; letter-spacing: .5px;
}
.lang-toggle:hover { color: var(--ink); border-color: var(--red); }

::selection { background: var(--red); color: #fff; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: rgba(17,20,30,.18); border-radius: 99px; }