/**
 * Site-wide stylesheet. Palette/type from the 2026-09 homepage redesign
 * brief — warm ivory as the main background, burgundy as an ACCENT (never a
 * large fill), terracotta and olive as sparing secondary accents, Cormorant
 * Garamond + Inter. See src/components/Header.astro, Footer.astro,
 * src/pages/index.astro for how these get used, and README's "2026-09
 * homepage redesign" section for the full brief and the reasoning behind
 * each token below.
 *
 * PALETTE HISTORY: this replaces an earlier oxblood/parchment/brass system
 * (dark burgundy header/footer/hero, Fraunces + Karla) — same variable
 * NAMES kept deliberately (--oxblood, --parchment, --ink, --brass…) so every
 * existing consumer across the ~20 files that reference them picks up the
 * new palette automatically, with zero risk of an unrenamed straggler left
 * on the old colors. Only genuinely new roles (--terracotta, --olive) got
 * new names; the dead --sage (0 usages, confirmed by grep) was removed
 * rather than repointed, since --olive replaces its intended role cleanly.
 *
 * CONTRAST, MEASURED NOT ASSUMED (relative-luminance WCAG formula, every
 * pairing below computed before use, same discipline as the earlier
 * --brass fix this file already documents further down):
 *   charcoal/burgundy on ivory or white:        8.7:1-15.0:1  (AA, both sizes)
 *   ivory on burgundy (primary button, header):  8.7:1        (AA, both sizes)
 *   terracotta AS TEXT on ivory or white:        3.0:1-3.3:1  (FAILS AA-normal,
 *     and fails even AA-large against ivory) — so terracotta never carries
 *     running text here, only borders/fills/small marks, exactly what the
 *     brief itself asks for ("use terracotta and olive only as subtle
 *     secondary accents").
 *   olive AS TEXT on ivory:                      4.4:1        (fails AA-normal
 *     by a hair) — same treatment as terracotta: decorative only.
 *   ivory/white text on a terracotta fill:       3.0:1-3.3:1  (FAILS) — so the
 *     brief's "hover: terracotta" is implemented as a terracotta fill with
 *     --ink (charcoal) text, not ivory text: charcoal-on-terracotta measures
 *     4.52:1, clearing AA-normal. See .wnh__btn:hover in index.astro.
 *
 * faq.css's rules now live in FaqAccordion.astro's own <style is:global>
 * instead of being @imported from here — CSS @import is strictly
 * render-blocking (the browser can't even discover it until this whole
 * file has downloaded and parsed), which is exactly what PageSpeed
 * Insights flagged as "render-blocking requests" and a chained critical
 * path. Same reasoning moved the Google Fonts stylesheet to BaseLayout's
 * <head> as a preconnected, non-blocking <link> — see that file. Neither
 * @import belongs here any more.
 *
 * Post and page styling (header, body typography, related reading) lives
 * with the components in src/components/article/, which replaced the
 * phase-01 scaffold that used to sit at the end of this file.
 */

:root {
  --measure: 68ch;

  /* Aliases onto src/styles/tokens.css (brief v2 §4), which is now the source
     of truth. Same values as before except --parchment-warm, which moves a
     shade lighter to the brief's #F1EADC. */
  --oxblood: var(--wnh-burgundy);
  --oxblood-deep: var(--wnh-burgundy-deep);
  --parchment: var(--wnh-ivory);
  --parchment-warm: var(--wnh-ivory-warm);
  --ink: var(--wnh-charcoal);
  /*
   * --brass now ALIASES --oxblood rather than naming its own color. Every
   * current consumer (eyebrow labels, prices, tags, ranking numbers,
   * CountryMap's review counts…) is small accent TEXT, and the redesign's
   * two new accent colors both fail AA at those sizes (measured above) —
   * burgundy is the only accent color in this palette that both reads as
   * "accent, not body text" AND passes contrast everywhere it's used. Same
   * fix in spirit as the earlier #b0813c -> #7a5720 change this variable
   * went through: a color that reads fine on a bright screen still needs
   * the arithmetic to check out, and the arithmetic says burgundy here.
   */
  --brass: var(--oxblood);
  /*
   * Light accent for the one surface still dark under this redesign — the
   * thin header nav bar (a slim strip, not a "large dark section" the brief
   * warns against). Previously a gold (#d9b36b); the brief explicitly rules
   * out gold ("Do not use gold gradients"), and there's no page-level use
   * for a fourth accent hue just for one nav bar, so this is a plain light
   * warm-white instead — reads as "brighter ivory," not a new color.
   */
  --brass-lite: #fbf8f2;
  /* Decorative accent only — see the contrast note above. Borders, small
     marks, hover FILLS (paired with --ink text, never --parchment/white). */
  --terracotta: var(--wnh-terracotta);
  /* Decorative accent only — same reasoning as --terracotta. Borders,
     dividers, small marks; never running text. */
  --olive: var(--wnh-olive);
  --rule: rgba(41, 38, 36, 0.14);
  --shadow: 0 1px 2px rgba(41, 38, 36, 0.05), 0 12px 34px -18px rgba(41, 38, 36, 0.22);

  /* Back-compat names from the phase-01 scaffold; the archive pages
     (/wino-blog/, /kategoria/, /kraj/) still use --ink-muted. */
  --ink-muted: rgba(41, 38, 36, 0.68);
  --line: var(--rule);
  --accent: var(--oxblood);

  /*
   * Was referenced by faq.css (ported verbatim from the WordPress child
   * theme) but never defined here, so the FAQ trigger's focus/hover color
   * silently fell back to inherited black this whole time. The original
   * theme hardcoded #c0392b; aligned to --oxblood instead now that this is
   * the site's real palette rather than Astra's default red.
   */
  --winoh-accent-red: var(--oxblood);
}

* { box-sizing: border-box; }

html { background: var(--parchment); }

body {
  margin: 0;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', 'Cormorant Garamond Fallback', serif;
  /* 500, not the old 600: this is a light/delicate garalde serif, not the
     bolder display face that used to sit here — 600 on every h1-h4
     sitewide read heavy-handed for it. Display moments that want extra
     elegance (the homepage hero, the brand-statement line) go lighter
     still, explicitly, rather than fighting this default. */
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.006em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

a { color: var(--oxblood); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
