/* 2025-2026.msbrandolini.com — site.css (tokens + base)
 *
 * Design tokens, global resets, @font-face declarations, user-preference root
 * rules (theme / text-size / font), and global media-query preferences
 * (prefers-contrast, prefers-reduced-motion, print, ::selection).
 *
 * Component styling lives in components.css. Both files are loaded from each
 * page — tokens first, components second, in that link order.
 */

:root {
  /* Paper + ink */
  --bg: #faf5ea;           /* warm cream */
  --bg-tint: #f3ebd5;      /* card/inset bg */
  --bg-deep: #ece2c8;      /* subtle elevation */
  --ink: #2b2518;          /* warm near-black */
  --ink-dim: #5c5240;      /* secondary text */
  --ink-quiet: #8e8468;    /* tertiary text, eyebrow labels */
  --accent: #c48a3a;       /* amber (darker than apex — needs contrast on cream) */
  --accent-deep: #8c5f20;  /* amber hover / emphasis */
  --accent-soft: #f6e8c7;  /* tooltip bg, term highlight */
  --rule: rgba(43, 37, 24, 0.12);
  --rule-strong: rgba(43, 37, 24, 0.22);
  --reading-width: 38rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Atkinson Hyperlegible', -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 80px;
}


/* --- print + reduced motion --- */

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

@media print {
  body { background: #fff; color: #000; }
  .term::after, .term::before { display: none; }
  .page-header, .site-footer { display: none; }
}

::selection {
  background: var(--accent);
  color: var(--bg);
}


/* --- accessibility: skip-to-content link --- */

.skip-link {
  position: absolute;


/* --- accessibility: prefers-contrast: more --- */
/* Users with OS-level "increase contrast" preference get stronger dims and
   rules so nothing relies on the warm-paper softness to be legible. */

@media (prefers-contrast: more) {
  :root {
    --ink-dim: var(--ink);
    --ink-quiet: #3a3225;
    --rule: rgba(43, 37, 24, 0.35);
    --rule-strong: rgba(43, 37, 24, 0.55);
    --accent-deep: #6a4610;
  }
  .term {
    border-bottom-width: 2px;
    border-bottom-style: solid;
  }
}


/* --- @font-face: OpenDyslexic (self-hosted, loaded only when :root[data-font="dyslexic"]) --- */
/* The browser does not fetch these woff2 files until an element actually renders
   in OpenDyslexic, so defining the @font-face here costs zero bytes for users
   who never opt in via the font toggle. */

@font-face {
  font-family: 'OpenDyslexic';
  src: url('/static/fonts/OpenDyslexic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('/static/fonts/OpenDyslexic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('/static/fonts/OpenDyslexic-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('/static/fonts/OpenDyslexic-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* --- user preferences: theme / text-size / font --- */
/* Attributes live on <html>. Set by an inline pre-hydration script in <head>
   (runs before this stylesheet loads, so there's no flash-of-wrong-theme) and
   updated by /static/toggles.js on user interaction. */

/* Dark-mode palette (overrides the light-mode :root tokens defined at the top
   of this file). Matches the apex "scholar's study" palette for family
   continuity. Accent-soft retuned for dark background contrast. */
:root[data-scheme="dark"],
:root[data-scheme="system"] {
  /* system mode only flips in the @media block below; this default is a no-op */
}
:root[data-scheme="dark"] {
  --bg: #13111c;
  --bg-tint: #1a1828;
  --bg-deep: #23212f;
  --ink: #f1e8d4;
  --ink-dim: #b3a78f;
  --ink-quiet: #7a715f;
  --accent: #ffc987;
  --accent-deep: #d49a4e;
  --accent-soft: #3a2a15;
  --rule: rgba(241, 232, 212, 0.08);
  --rule-strong: rgba(241, 232, 212, 0.15);
}
@media (prefers-color-scheme: dark) {
  :root[data-scheme="system"] {
    --bg: #13111c;
    --bg-tint: #1a1828;
    --bg-deep: #23212f;
    --ink: #f1e8d4;
    --ink-dim: #b3a78f;
    --ink-quiet: #7a715f;
    --accent: #ffc987;
    --accent-deep: #d49a4e;
    --accent-soft: #3a2a15;
    --rule: rgba(241, 232, 212, 0.08);
    --rule-strong: rgba(241, 232, 212, 0.15);
  }
}

/* Text size. Scales body font-size directly. Headings use fixed px / clamp()
   and do not scale in this pass — text-size matters most for long-form body
   reading, which is where it applies. A future pass could convert more sizes
   to rem for fuller scaling. */
:root[data-text-size="1"] body { font-size: 16px; }
:root[data-text-size="2"] body { font-size: 18px; } /* default */
:root[data-text-size="3"] body { font-size: 21px; line-height: 1.7; }

/* Font toggle. Atkinson Hyperlegible is the default (already in body{}); this
   swaps to OpenDyslexic for users who prefer it. Line-height bumps because
   OpenDyslexic's bottom-heavy forms need more air. Headings stay in Fraunces —
   OpenDyslexic is a body-copy intervention, not a display-typography one. */
:root[data-font="dyslexic"] body {
  font-family: 'OpenDyslexic', 'Atkinson Hyperlegible', -apple-system, sans-serif;
  line-height: 1.8;
}