/*
 * Barvy, písmo a rozměry. Všechny komponenty berou hodnoty odsud,
 * takže tmavý režim je jen jiná sada proměnných níže.
 */
:root {
  color-scheme: light;
  --color-bg: #f5f6f8;
  --color-panel: #ffffff;
  --color-fg: #15181d;
  --color-fg-muted: #5c6370;
  --color-border-line: #e0e3e9;
  --color-ok: #1a7f37;
  --color-bad: #c42b2b;
  --text-secondary: #5c6370;

  --chart-grid: #eceef2;
  --chart-axis: #c2c7d0;
  --chart-reference: #8a919c;
  --chart-muted: #b8bdc6;
  --surface-popover: #ffffff;
  --border: #d8dce3;
  --shadow-popover: 0 6px 24px rgba(20, 24, 31, .12), 0 1px 3px rgba(20, 24, 31, .08);

  /* barvy datových řad v pevném pořadí (8. je červená, i pro označení dálnic) */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #6250d6; --series-8: #e34948;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-caption: 12px;
  --font-size-body: 14px;
  --font-size-heading: 16px;
  --font-size-title: 22px;
  --font-weight-medium: 600;

  --gap-xs: 4px; --gap-sm: 8px; --gap-md: 12px; --gap-lg: 20px; --gap-xl: 32px;
  --pad-xs: 4px; --pad-sm: 8px; --pad-md: 12px; --pad-lg: 18px; --pad-xl: 28px;
  --radius: 8px;
  --dur-slow: 300ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0f1115;
    --color-panel: #171a20;
    --color-fg: #eceef2;
    --color-fg-muted: #9aa1ad;
    --color-border-line: #2a2f38;
    --color-ok: #4ac26b;
    --color-bad: #f0685f;
    --text-secondary: #9aa1ad;
    --chart-grid: #232831;
    --chart-axis: #3b424d;
    --chart-reference: #6e7683;
    --chart-muted: #4a515c;
    --surface-popover: #1d2128;
    --border: #333a44;
    --shadow-popover: 0 8px 28px rgba(0, 0, 0, .45);
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #2f9e2f; --series-7: #9085e9; --series-8: #e66767;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0f1115;
  --color-panel: #171a20;
  --color-fg: #eceef2;
  --color-fg-muted: #9aa1ad;
  --color-border-line: #2a2f38;
  --color-ok: #4ac26b;
  --color-bad: #f0685f;
  --text-secondary: #9aa1ad;
  --chart-grid: #232831;
  --chart-axis: #3b424d;
  --chart-reference: #6e7683;
  --chart-muted: #4a515c;
  --surface-popover: #1d2128;
  --border: #333a44;
  --shadow-popover: 0 8px 28px rgba(0, 0, 0, .45);
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #2f9e2f; --series-7: #9085e9; --series-8: #e66767;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.45;
}
.page {
  padding-block: var(--gap-xl) var(--gap-xl);
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
@media (max-width: 600px) {
  .page { padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); padding-block: var(--gap-lg); }
}
/* skeleton while a chart waits for its data */
.is-loading { position: relative; }
.is-loading:empty::after {
  content: ""; position: absolute; inset: 0; min-height: 1.2em; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--chart-grid) 25%, var(--color-border-line) 50%, var(--chart-grid) 75%);
  background-size: 200% 100%; animation: dz-shimmer 1.4s linear infinite;
}
span.is-loading:empty, b.is-loading:empty { display: inline-block; width: 4em; }
@keyframes dz-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .is-loading:empty::after { animation: none; } }