/* Shared design tokens across all three homepage prototypes.
   Phase 040 — see decisions.md D13 for the rationale.

   Type: Source Sans 3 (body) / Source Serif 4 (display) / JetBrains Mono (mono).
   Source Sans 3 is a deliberate continuity choice, not a default pick: it is
   the CV's own face (`sourcesanspro` in the LaTeX source), so the site and
   the downloadable PDF agree without anyone deciding they should. Source
   Serif 4 is its paired serif from the same type family, which keeps the
   body/display pairing coherent rather than assembled from two unrelated
   foundries.

   Accent: #004F90, Igor's own `primaryColor` from the CV. Contrast against
   --color-bg (#fdfdfc) is ~8.2:1 — comfortably past 4.5:1, close to AAA. */

:root {
  --font-body:    "Source Sans 3", "Source Sans 3 Fallback", "Source Sans Pro", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Source Serif 4", "Source Serif 4 Fallback", "Source Serif Pro", ui-serif, Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --color-bg:      #fdfdfc;
  --color-surface: #f6f5f3;
  --color-text:    #1a1a18;
  --color-muted:   #6b6a66;
  --color-rule:    #e0dedb;
  --color-accent:  #004f90;
  --color-accent-wash: #eaf1f8;

  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2.5rem;
  --space-7: 4rem;    --space-8: 6rem;

  --content-width: 68ch;
  --wide-width:    1100px;
  --radius-small:  2px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "liga" 1, "kern" 1;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover { text-decoration-thickness: 2px; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.rule {
  border: none;
  border-top: 1px solid var(--color-rule);
  margin: 0;
}

/* height: auto is required alongside max-width - without it, a browser can
   keep an img's HTML height attribute fixed while width scales down,
   distorting the image. Confirmed happening in Phase 090's Lighthouse pass. */
img { max-width: 100%; height: auto; display: block; }

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

/* Bridge onto the Bootstrap/cosmo variables the theme actually reads, so
   links and body text pick up the palette without per-element overrides. */
:root {
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent);
  --bs-border-color: var(--color-rule);
  --bs-font-sans-serif: var(--font-body);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.65;
}