/* =============================================================
   USUCAPIO · BASE / RESET / BODY
   ============================================================= */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-default);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  /* Subtilní papírová textura — jemný šum přes lineární přechod.
     Decentně, ne vintage scrapbook. */
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 25% 18%, rgba(125, 29, 29, 0.012) 0, transparent 38%),
    radial-gradient(circle at 78% 82%, rgba(21, 20, 15, 0.018) 0, transparent 42%);
  min-height: 100vh;
}

/* Sans pro UI prvky. */
button, input, select, textarea, label, nav, .ui {
  font-family: var(--font-sans);
}

/* Mono pro paragrafy, sp.zn., ELI a podobné. */
code, kbd, samp, pre, .mono, .ref {
  font-family: var(--font-mono);
  font-feature-settings: var(--otf-mono);
  font-size: 0.95em;
}

/* Linky — žádné brand modré. Inkoust + pečeť při hoveru. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--ink-4);
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
a:hover {
  color: var(--seal);
  text-decoration-color: var(--seal);
}
a:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}

/* Tlačítka — hranatá, „letterpress" feel. */
button, .btn {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: var(--rule-bold);
  border-color: var(--ink);
  border-radius: var(--radius);
  padding: 0.55em 1em;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
button:hover, .btn:hover {
  background: var(--seal);
  border-color: var(--seal);
}
button:active, .btn:active { transform: translate(1px, 1px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--seal {
  background: var(--seal);
  border-color: var(--seal);
  color: var(--paper);
}
.btn--seal:hover { background: var(--seal-2); border-color: var(--seal-2); }

/* Inputy — ploché, hranaté. */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], textarea, select {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  background: var(--paper);
  color: var(--ink);
  border: var(--rule-firm);
  border-radius: var(--radius);
  padding: 0.55em 0.7em;
  outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--seal);
  box-shadow: inset 0 -2px 0 0 var(--seal);
}

/* Tabulky — chleba a sůl tohohle webu. */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.5;
}
table th, table td {
  text-align: left;
  padding: 0.6em 0.85em;
  border-bottom: var(--rule-soft);
  vertical-align: top;
  font-feature-settings: var(--otf-tabular);
}
table th {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--t-xs);
  color: var(--ink-3);
  border-bottom: var(--rule-firm);
  background: var(--paper-2);
}
table tbody tr:hover { background: var(--paper-2); }
table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-3);
  padding-bottom: var(--s-3);
}

/* Horizontální linky — editoriální. */
hr {
  border: 0;
  border-top: var(--rule-firm);
  margin: var(--s-7) 0;
}
hr.double { border: 0; border-top: var(--rule-double); }
hr.hair   { border: 0; border-top: var(--rule-hair); }

/* Selection — pečetní červená. */
::selection { background: var(--seal); color: var(--paper); }

/* Focus globální. */
:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}

/* Skip link — a11y. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-sans);
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* Container utility. */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 720px; }

/* Vizuálně skrytý text (a11y). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}