/* Otomobin tasarım sistemi: renk, yazı, ölçü belirteçleri. Marka kimliği (Faz III): Mavi #0878B8 · Derin #073B63 · Dijital #2D9CDB · Buz #EAF5FB · Mürekkep #17212B.
   Yazı tipi Inter (yüklü değilse sistem yazı tipi). Açık ve koyu tema; `data-theme` ile zorlanabilir. */
:root {
  color-scheme: light;
  --blue: #0878b8;
  --deep: #073b63;
  --digital: #2d9cdb;
  --ice: #eaf5fb;
  --ink: #17212b;
  --edge: #17212b;
  --on-deep: #ffffff;

  --bg: #eaf5fb;
  --bg-grad: linear-gradient(160deg, #eaf5fb 0%, #d3eaf8 100%);
  --surface: #ffffff;
  --surface-2: #f4f9fc;
  --line: #cfe2ee;
  --fg: #17212b;
  --mut: #4d5e6e;
  --accent: #0878b8;
  --accent-fg: #ffffff;
  --accent-soft: #d6ecf8;
  --ok: #1a8f4c;
  --ok-soft: #d9f2e3;
  --warn: #b7791f;
  --warn-soft: #fbefd5;
  --bad: #d1332e;
  --bad-soft: #fbe1df;
  --shadow-hard: 0 4px 0 #17212b;
  --shadow-soft: 0 10px 30px rgba(7, 59, 99, 0.12);
  --map-bg: #e3f1f9;
  --map-block: #f6fbfe;
  --map-road: #ffffff;
  --map-water: #bfe0f3;
  --map-route: #0878b8;
  --map-zone: #f76707;
  --map-zone-ink: #8a2d00;
  --map-pin-from: #2d9cdb;
  --map-pin-to: #073b63;
  --map-car: #0878b8;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-pill: 999px;
  --font: Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1824;
  --bg-grad: linear-gradient(160deg, #0b1824 0%, #0d2236 100%);
  --surface: #12263a;
  --surface-2: #0f2031;
  --line: #234159;
  --fg: #eaf5fb;
  --mut: #93a9bb;
  --accent: #2d9cdb;
  --accent-fg: #06141f;
  --accent-soft: #123a56;
  --ok: #4ccf86;
  --ok-soft: #123b27;
  --warn: #f0b95a;
  --warn-soft: #3b2e12;
  --bad: #ff7b74;
  --bad-soft: #432021;
  --edge: #5c97bf;
  --deep: #a9dcf7;
  --blue: #4db3ec;
  --on-deep: #06141f;
  --shadow-hard: 0 4px 0 #000;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.4);
  --map-bg: #0e2235;
  --map-block: #12304a;
  --map-road: #1b4466;
  --map-water: #0a3a5c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1824;
    --bg-grad: linear-gradient(160deg, #0b1824 0%, #0d2236 100%);
    --surface: #12263a;
    --surface-2: #0f2031;
    --line: #234159;
    --fg: #eaf5fb;
    --mut: #93a9bb;
    --accent: #2d9cdb;
    --accent-fg: #06141f;
    --deep: #a9dcf7;
    --blue: #4db3ec;
    --on-deep: #06141f;
    --edge: #5c97bf;
    --accent-soft: #123a56;
    --ok: #4ccf86;
    --ok-soft: #123b27;
    --warn: #f0b95a;
    --warn-soft: #3b2e12;
    --bad: #ff7b74;
    --bad-soft: #432021;
    --shadow-hard: 0 4px 0 #000;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.4);
    --map-bg: #0e2235;
    --map-block: #12304a;
    --map-road: #1b4466;
    --map-water: #0a3a5c;
  }
}