/* ============================================================
   FINVOX — BASE STYLES
   Reset + element defaults. Import after tokens.css.
   ============================================================ */

/* Vnořený @import je tu záměrně vypnutý: pořadí souborů určuje `index.html`,
   které je načítá všechny čtyři samo. Jinak by se tokeny načetly dvakrát.
   Při kopírování novější verze design systému tenhle řádek zase vypni.
   @import url("./tokens.css"); */

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

html, body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--fx-font-text);
  font-size: var(--fx-text-16);
  line-height: var(--fx-leading-normal);
  color: var(--fx-ink);
  background: var(--fx-paper);
  font-weight: 400;
}

/* --- Headings — Josefin Sans, all caps with generous tracking on display ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fx-font-display);
  color: var(--fx-navy);
  margin: 0 0 var(--fx-space-4);
  letter-spacing: var(--fx-track-display);
  line-height: var(--fx-leading-snug);
  text-wrap: balance;
}

h1 { font-size: var(--fx-text-64); font-weight: 700; line-height: var(--fx-leading-tight); }
h2 { font-size: var(--fx-text-48); font-weight: 700; }
h3 { font-size: var(--fx-text-38); font-weight: 600; }
h4 { font-size: var(--fx-text-30); font-weight: 600; }
h5 { font-size: var(--fx-text-24); font-weight: 600; }
h6 { font-size: var(--fx-text-20); font-weight: 600; }

p {
  margin: 0 0 var(--fx-space-4);
  text-wrap: pretty;
  max-width: 68ch;
}

a {
  color: var(--fx-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--fx-gold);
  transition: color var(--fx-dur-fast) var(--fx-ease-out);
}
a:hover { color: var(--fx-gold-700); }

strong, b { font-weight: 600; }

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

hr {
  border: 0;
  height: 1px;
  background: var(--fx-line);
  margin: var(--fx-space-8) 0;
}

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

button { font: inherit; cursor: pointer; }

::selection {
  background: var(--fx-gold);
  color: var(--fx-navy);
}

/* ---------- UTILITIES ---------- */

.fx-eyebrow {
  font-family: var(--fx-font-display);
  text-transform: uppercase;
  letter-spacing: var(--fx-track-eyebrow);
  font-size: var(--fx-text-12);
  font-weight: 600;
  color: var(--fx-gold-700);
}

.fx-display {
  font-family: var(--fx-font-display);
  font-size: clamp(var(--fx-text-48), 6vw, var(--fx-text-80));
  font-weight: 700;
  line-height: var(--fx-leading-tight);
  letter-spacing: var(--fx-track-display);
  color: var(--fx-navy);
}

.fx-lede {
  font-size: var(--fx-text-20);
  line-height: var(--fx-leading-normal);
  color: var(--fx-ink-muted);
  max-width: 60ch;
}

.fx-rule {
  display: inline-block;
  width: 48px;
  height: 2px;
  background: var(--fx-gold);
  margin-bottom: var(--fx-space-4);
}

.fx-container {
  max-width: var(--fx-container);
  margin-inline: auto;
  padding-inline: var(--fx-gutter);
}