/*
 * Tokens de "Atlas de carreteras": compartidos por el sitio (Tailwind) y el admin de Django.
 * El tema lo decide data-theme en <html>: "light", "dark" o "auto" (sigue al sistema),
 * la misma convención y la misma clave de localStorage que usa el admin.
 */

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-latin-wght-normal.e4c9b081863a.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed-latin-600-normal.64a19a7cafc2.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed-latin-700-normal.d829c77621b7.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Página del atlas: blanco limpio, rutas en rojo y azul. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f1f5f9;
  --water: #e6eff7;
  --text: #15191f;
  --text-muted: #525a66;
  --line: #dce1e7;
  --line-strong: #b8c0cb;
  --route: #c8102e;
  --action: #1c4f9c;
  --action-hover: #153d7a;
  --action-fg: #ffffff;
  --park: #2b7a4b;
  --warn: #9a5b00;
  --warn-bg: #fff6e5;
  --danger-bg: #fdecee;
  --focus: #1c4f9c;
  --shadow: 0 1px 2px rgb(21 25 31 / 0.06), 0 10px 28px -14px rgb(21 25 31 / 0.22);
  --font-display: "Barlow Semi Condensed", "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* El atlas de noche: pizarra azul oscuro con las mismas rutas, más luminosas. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f141c;
  --surface: #161c26;
  --surface-alt: #1b2330;
  --water: #1a2a3d;
  --text: #e8ecf2;
  --text-muted: #a5aebb;
  --line: #2a3341;
  --line-strong: #3d4757;
  --route: #ff6476;
  --action: #86adff;
  --action-hover: #a9c4ff;
  --action-fg: #0f141c;
  --park: #63c58f;
  --warn: #f2b45c;
  --warn-bg: #2e2516;
  --danger-bg: #33171d;
  --focus: #86adff;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -16px rgb(0 0 0 / 0.75);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg: #0f141c;
    --surface: #161c26;
    --surface-alt: #1b2330;
    --water: #1a2a3d;
    --text: #e8ecf2;
    --text-muted: #a5aebb;
    --line: #2a3341;
    --line-strong: #3d4757;
    --route: #ff6476;
    --action: #86adff;
    --action-hover: #a9c4ff;
    --action-fg: #0f141c;
    --park: #63c58f;
    --warn: #f2b45c;
    --warn-bg: #2e2516;
    --danger-bg: #33171d;
    --focus: #86adff;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -16px rgb(0 0 0 / 0.75);
  }
}