/* ===========================================================================
   base.css — reset, global typography, accessibility
   ===========================================================================
   Import order in the HTML matters:
     fonts.css -> tokens.css -> base.css -> layout.css -> components.css -> sections.css
   =========================================================================== */

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

/* Margins are zeroed globally. Spacing comes from the layout (gap), not from
   margins on individual elements — that way nothing collapses or doubles up. */
* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchors must not hide under the sticky navigation. */
  scroll-padding-top: calc(var(--nav-height) + var(--space-5));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  min-height: 100vh;
  background-color: var(--color-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* The ONLY `!important` allowed in this project.
   The `hidden` attribute carries meaning ("this element is not here right now"),
   and its default `display: none` loses to ANY class rule — e.g. a component
   with `display: flex` stays visible despite `element.hidden = true`.
   That is a real bug which has happened here twice (the „w toku" indicator and
   the result block in the demo section). Instead of catching it in every
   component separately, we settle it once and globally. */
[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------------------
   Typography
--------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--text-display-xl);
  font-weight: var(--weight-bold);
}

h2 {
  font-size: var(--text-display-lg);
}

h3 {
  font-size: var(--text-display-md);
  line-height: var(--leading-snug);
}

h4 {
  font-size: var(--text-title);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
}

p {
  text-wrap: pretty;
}

strong,
b {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

small {
  font-size: var(--text-caption);
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.925em;
}

a {
  color: var(--color-accent-text);
  text-decoration-color: var(--color-accent-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease-out),
    text-decoration-color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration-color: currentcolor;
}

/* Running text — line length capped for readability. */
.prose {
  max-width: var(--width-prose);
  color: var(--color-text-secondary);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.prose--tight {
  font-size: var(--text-body);
}

/* Numbers in columns must line up. */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Accessibility
--------------------------------------------------------------------------- */

/* Focus ring visible on every backdrop. We never remove the outline without
   providing a replacement. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Elements with their own, richer focus state. */
.focus-ring-inset:focus-visible {
  outline-offset: -2px;
}

/* Screen-reader-only text. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link — appears during keyboard navigation. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-overlay);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--color-text-on-accent);
}

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