/* EaseRoute · Asphalt Signal — shared tokens and browser surfaces (website + Control Panel) */
:root {
  color-scheme: dark;
  --asphalt-0: #0B0D10;
  --asphalt-1: #0F1114;
  --asphalt-2: #16191D;
  --asphalt-3: #1F2329;
  --line: #2A2E35;
  --line-2: #3A3F48;
  --ink: #F3F1EA;
  --ink-2: #BAB6AC;
  --ink-3: #908C83;
  --paint: #FFC52E;          /* road-marking yellow */
  --paint-deep: #D9A20F;
  --paint-ink: #121212;
  /* layer colours — one per Road Pulse layer, used only on markers and data */
  --l-traffic: #FF5247;
  --l-security: #FF8A1F;
  --l-enforce: #FF4FA3;
  --l-hazard: #A99BFF;
  --l-weather: #3EA6FF;
  --l-road: #E8E3D6;
  --l-fuel: #19C2A0;
  --l-events: #2FAE66;
  --ok: #2FAE66;
  --warn: #FF8A1F;
  --bad: #FF5247;

  --f-sign: 'Noto Kufi Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
  --f-text: 'Noto Sans Arabic', 'Noto Sans', system-ui, sans-serif;
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 20px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* The owner's Arabic lettering, without the busy app-icon background. */
.brand-mark { display: inline-block; flex: none; width: 40px; height: 40px; color: var(--paint); background: currentColor;
  -webkit-mask: url('../img/logo-lettering.png') center / 180% no-repeat;
  mask: url('../img/logo-lettering.png') center / 180% no-repeat; }

/* Noto Kufi Arabic (SIL OFL 1.1, assets/fonts/OFL.txt), self-hosted: the display voice never depends on a third-party CDN */
@font-face { font-family: 'Noto Kufi Arabic'; src: url('../fonts/web/NotoKufiArabic.woff') format('woff');
  font-weight: 100 900; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--asphalt-1);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.8;
  caret-color: var(--paint);
  -webkit-font-smoothing: antialiased;
}
html[lang="en"] body { line-height: 1.65; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--f-sign); line-height: 1.25; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .28em; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-color: var(--paint); }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--paint); color: var(--paint-ink); }
:focus-visible { outline: 3px solid var(--paint); outline-offset: 3px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid var(--asphalt-1); }
::-webkit-scrollbar-track { background: transparent; }

.num { font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 99; background: var(--paint); color: var(--paint-ink);
  padding: 8px 14px; border-radius: var(--r-1); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* glyph icons from assets/icons.svg */
.g { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; }

/* markers: circle = live report, squircle = fixed feature, pin = place */
.mk-live { display: inline-grid; place-items: center; width: 38px; aspect-ratio: 1; color: #111; border-radius: 50%;
  background: var(--c, var(--paint)); box-shadow: 0 0 0 2px var(--asphalt-1); }
.mk-sq { display: inline-grid; place-items: center; width: 36px; aspect-ratio: 1; border-radius: 30%;
  color: var(--c, var(--l-road)); background: var(--asphalt-3); box-shadow: inset 0 0 0 2px currentColor; }
.mk-pin { display: inline-grid; place-items: center; width: 36px; aspect-ratio: 1; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg); background: var(--c, var(--paint)); color: #111; }
.mk-pin > .g { transform: rotate(45deg); }
.mk-live > .g, .mk-sq > .g, .mk-pin > .g { width: 52%; height: 52%; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .55em 1.3em;
  border-radius: var(--r-2); border: 0; font-family: var(--f-sign); font-weight: 800; font-size: 1rem; text-decoration: none;
  cursor: pointer; transition: transform .18s var(--ease-out), background-color .18s, box-shadow .18s; }
.btn-paint { background: var(--paint); color: var(--paint-ink); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7); }
.btn-paint:hover { background: #FFD457; transform: translateY(-1px); }
.btn-paint:active { transform: translateY(1px); background: var(--paint-deep); box-shadow: none; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); background: var(--asphalt-2); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* road-marking lane dashes */
.lane { height: 4px; border: 0; margin: 0;
  background: repeating-linear-gradient(90deg, var(--paint) 0 30px, transparent 30px 56px); opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}