/* ============================================================
   base.css — design tokens, fonts, reset, shared typography
   Used by every section. Section-specific rules live in their
   own files (hero.css, sweden.css, comments.css).
   ============================================================ */

/* ---------- fonts ----------
   Fraunces (display serif, SIL OFL) and IBM Plex Mono (utility
   mono, SIL OFL) are embedded as base64 so the page also works
   opened straight from disk (no server, no CDN request). */
@font-face {
  font-family: "Fraunces Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-600.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces Display";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/fraunces-900.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plexmono-500.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plexmono-600.woff2") format("woff2");
}

/* ---------- design tokens: light (default) ---------- */
:root {
  /* color */
  --paper: #f3f5f6;       /* hero ground — cool off-white, not warm cream */
  --paper-raised: #ffffff;
  --ink: #12181f;         /* primary text */
  --ink-soft: #4b5f70;    /* secondary text / labels */
  --cloud: #dbe3e9;       /* hairlines, dividers on paper */
  --sea: #0b5fa5;         /* Swedish flag blue, deepened for elegance */
  --sea-deep: #063a66;    /* dark end of the Sweden section */
  --sea-ink: #eaf2f9;     /* text on the blue Sweden section */
  --sun: #fecc02;         /* Swedish flag yellow — sparing accent */
  --focus-ring: #0b5fa5;

  /* the hero is pinned to white/black on purpose, in both themes —
     not derived from --paper/--ink, which flip for dark mode */
  --hero-bg: #ffffff;
  --hero-ink: #0d1015;
  --hero-ink-soft: #5b6570;
  --hero-divider: #dfe3e7;
  --hero-accent: #0b5fa5;

  /* type */
  --font-display: "Fraunces Display", ui-serif, Georgia, serif;
  --font-mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* layout */
  --content-width: 40rem;
  --wide-width: 64rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --space-6: 8rem;
}

/* ---------- design tokens: dark ----------
   Un-stamped root (viewer theme = "system") follows the OS via
   prefers-color-scheme. An explicit light choice always wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d141b;
    --paper-raised: #131c25;
    --ink: #eef2f5;
    --ink-soft: #9fb0bd;
    --cloud: #263440;
    --sea: #2f8ce0;
    --sea-deep: #04203b;
    --sea-ink: #eaf2f9;
    --sun: #ffd21f;
    --focus-ring: #5babe8;
  }
}
/* explicit dark toggle wins regardless of OS setting */
:root[data-theme="dark"] {
  --paper: #0d141b;
  --paper-raised: #131c25;
  --ink: #eef2f5;
  --ink-soft: #9fb0bd;
  --cloud: #263440;
  --sea: #2f8ce0;
  --sea-deep: #04203b;
  --sea-ink: #eaf2f9;
  --sun: #ffd21f;
  --focus-ring: #5babe8;
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden; /* the off-canvas cross graphic in sweden.css bleeds past the edge */
}
img,
svg {
  max-width: 100%;
  display: block;
}
button,
input,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
}

/* visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@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;
  }
}

/* ---------- shared typography ---------- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 900;
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
}

.container {
  width: 100%;
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- scroll reveal ----------
   Sections opt in with .reveal; main.js toggles .is-visible via
   IntersectionObserver. Reduced-motion users get it pre-applied. */
.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* tabular figures wherever digits line up */
.tabular {
  font-variant-numeric: tabular-nums;
}