/* Sdílené tokeny a základ pro aplikaci. Barvy vycházejí z ikony aplikace (#3D9DE8). */
:root {
  --brand: #3d9de8;
  --brand-600: #2786d6;
  --brand-700: #1d6cb2;
  --brand-300: #7fc0f2;
  --brand-100: #dcefff;
  --brand-50: #f0f8ff;
  --cyan: #2cc0ff;
  --bg: #f1f8ff;
  --surface: #ffffff;
  --surface-2: #f6fafe;
  --ink: #0a2540;
  --ink-2: #3b5775;
  --muted: #6a829b;
  --line: #d9e8f5;
  --late: #e5484d;
  --late-bg: #ffe9ea;
  --ok: #138a5b;
  --ok-bg: #def6ea;
  --train: #6a5bd8;
  --train-bg: #ebe8ff;
  --warn-bg: #fff4d6;
  --warn: #8a5a00;
  --shadow-1: 0 1px 2px rgba(10, 37, 64, .06), 0 4px 14px rgba(29, 108, 178, .08);
  --shadow-2: 0 2px 6px rgba(10, 37, 64, .08), 0 18px 40px rgba(29, 108, 178, .16);
  --radius: 18px;
  --radius-sm: 12px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #5dbfff; --brand-600: #3fa9f0; --brand-700: #8ed0ff; --brand-300: #2a6fa6; --brand-100: #12324d; --brand-50: #0c2236;
    --cyan: #5dbfff;
    --bg: #05111f; --surface: #0b1f33; --surface-2: #0e2740; --ink: #e8f3fe; --ink-2: #b4cce2; --muted: #85a2bd; --line: #18344f;
    --late: #ff7b80; --late-bg: #3b1a1f; --ok: #5fdba2; --ok-bg: #0f3326; --train: #b2a8ff; --train-bg: #26214f;
    --warn-bg: #3a2c0a; --warn: #ffd37a;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand: #5dbfff; --brand-600: #3fa9f0; --brand-700: #8ed0ff; --brand-300: #2a6fa6; --brand-100: #12324d; --brand-50: #0c2236;
  --cyan: #5dbfff;
  --bg: #05111f; --surface: #0b1f33; --surface-2: #0e2740; --ink: #e8f3fe; --ink-2: #b4cce2; --muted: #85a2bd; --line: #18344f;
  --late: #ff7b80; --late-bg: #3b1a1f; --ok: #5fdba2; --ok-bg: #0f3326; --train: #b2a8ff; --train-bg: #26214f;
  --warn-bg: #3a2c0a; --warn: #ffd37a;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand-600); }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: 0 1.4rem;
  border: 0; border-radius: 999px; font-weight: 650; text-decoration: none; letter-spacing: -.005em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: linear-gradient(180deg, var(--brand), var(--brand-600)); color: #fff; box-shadow: 0 6px 18px rgba(39, 134, 214, .35); }
.btn-primary:hover { box-shadow: 0 8px 24px rgba(39, 134, 214, .45); }
:root[data-theme="dark"] .btn-primary { color: #04243d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { color: #04243d; } }
.btn-soft { background: var(--brand-100); color: var(--brand-700); }
.btn-soft:hover { background: color-mix(in srgb, var(--brand-100) 80%, var(--brand)); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}