/* App Inquirer tokens: the style guide's colours and type (STYLE-GUIDE.md). Contrast is WCAG 2.x. */
:root {
  --ai-ink: #000000;          /* text, the tile: 21:1 on paper */
  --ai-paper: #FFFFFF;
  --ai-red: #D0261C;          /* press red: 5.3:1 on paper, so text at any size; white on red 5.3:1 */
  --ai-ink-2: #4A4A4A;        /* secondary text: 8.9:1 */
  --ai-ink-3: #666666;        /* meta text (dates, counts): 5.7:1 on paper, 5.1:1 on wash */
  --ai-rule: #D9D9D9;         /* hairlines and borders, not text */
  --ai-wash: #F2F2F2;         /* panels and bands */

  --ai-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;   /* headlines, labels, UI */
  --ai-font-text: "Newsreader", Georgia, "Times New Roman", serif;      /* reading: decks, stories */
  --ai-radius-icon: 22.5%;    /* app icons, always */
  --ai-radius: 2px;           /* everything else: square, like print */
}
/* Night: black paper, white ink. The logo's red stays #D0261C (art, 4.0:1); small red text uses --ai-red. */
.ai-night, :root[data-theme="night"] {
  --ai-ink: #FFFFFF;
  --ai-paper: #000000;
  --ai-red: #F04A3E;          /* 5.8:1 on black, 5.2:1 on #111111 */
  --ai-ink-2: #BDBDBD;
  --ai-ink-3: #8F8F8F;        /* 6.5:1 on black, 5.8:1 on #111111 */
  --ai-rule: #2A2A2A;
  --ai-wash: #111111;
}
/* Dark mode follows the reader's system setting unless they chose light. A tiny script in <head> sets
   data-theme="light" or "night" from the reader's stored choice before first paint (STYLE-GUIDE.md, section 4). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ai-ink: #FFFFFF;
    --ai-paper: #000000;
    --ai-red: #F04A3E;
    --ai-ink-2: #BDBDBD;
    --ai-ink-3: #8F8F8F;
    --ai-rule: #2A2A2A;
    --ai-wash: #111111;
  }
}
/* The masthead's voice for small caps labels (kickers, section heads, buttons). */
.ai-label { font-family: var(--ai-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }