/**
 * Base styles — reset + typography + globální chování.
 * Načítá tokens.css.
 */
@import url("tokens.91e65046d007.css");

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-surface-subtle);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  color: var(--color-text-primary);
  /* CZ: Dlouhý nelomitelný název/URL v nadpisu se musí zalomit, ne přetéct viewport na mobilu.
     EN: A long unbreakable title/URL in a heading must wrap, not overflow the viewport on mobile. */
  overflow-wrap: break-word;
}

h1 { font-size: var(--text-4xl); font-weight: var(--font-bold); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin: 0; overflow-wrap: break-word; }

/* CZ: Média se nikdy nesmí roztáhnout přes svůj kontejner (typicky obrázky vložené do těla
       článků/videí přes Wagtail StreamField, které nemají vlastní inline width). height:auto
       drží poměr stran; inline height (např. logo) tuto hodnotu přebije, takže loga zůstanou.
   EN: Media must never exceed its container (typically images embedded in article/video bodies
       via Wagtail StreamField with no inline width). height:auto preserves aspect ratio; an
       inline height (e.g. the logo) overrides it, so fixed-size logos stay intact. */
img, video, iframe { max-width: 100%; }
img { height: auto; }

/* CZ: Dlouhé řetězce v buňkách/položkách seznamů také lámat (názvy, e-maily, URL).
   EN: Break long strings in table cells / list items too (titles, emails, URLs). */
td, th, li, dd, dt { overflow-wrap: break-word; }

a {
  /* CZ: Odkazy používají „strong" accent (4.98:1), ne brandovou #FF6B35 (2.84:1 — neprojde AA).
     EN: Links use the "strong" accent (4.98:1), not brand #FF6B35 (2.84:1 — fails AA). */
  color: var(--color-accent-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-strong-hover); text-decoration: underline; text-underline-offset: 4px; }

button { font-family: inherit; cursor: pointer; }

input, select, textarea { font-family: inherit; font-size: inherit; }

:focus-visible {
  /* CZ: Průhledný outline vedle box-shadow — ve Windows „forced colors / high contrast"
         se box-shadow zahazuje a outline se naopak zviditelní, takže focus zůstane vidět.
     EN: Transparent outline alongside box-shadow — in Windows forced-colors / high-contrast
         mode box-shadow is dropped while the outline becomes visible, so focus stays visible. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

::selection { background-color: var(--color-accent-strong); color: var(--color-text-inverse); }

/* CZ: Respektuj systémové omezení pohybu — zkrať animace/přechody (globálně, nejen chat.css).
       Chrání uživatele s vestibulárními potížemi (nekonečné voice-pulse/voice-spin apod.).
   EN: Respect the OS "reduce motion" setting — shorten animations/transitions globally
       (not just chat.css). Protects users with vestibular disorders (infinite voice-pulse etc.). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* HTMX indicators */
.htmx-indicator { opacity: 0; transition: opacity var(--transition-normal); }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* Disable transitions during theme switch (prevents flash) */
.no-transitions, .no-transitions * { transition: none !important; }