/* Swarm event design system — tokens.
   Source: the Swarm Template (.pptx). Brand orange updated to #F47A20 on 30 August 2026.

   Components use the role tokens (--bg, --fg, --accent-text …), never the raw palette.

   Every theme block below has the same specificity, (0,1,0), so the last matching block wins:
   light (default) → dark from the OS → dark forced → print. Keep that order. */

:root {
  /* raw palette */
  --paper: #FAFAFA;
  --ink: #242424;
  --orange: #F47A20;
  --orange-clear: #F36500; /* light theme: the brand hue, just deep enough for 3:1 on --paper */
  --orange-deep: #C34100;  /* light theme small text: clearer than the decks' brown #BB5509 */
  --grey: #6A6A6A;
  --grey-light: #9A9A9A;   /* the template's #6A6A6A is 2.3:1 on dark */
  --ink-fg: #E6E4E1;

  /* role tokens, light theme */
  --bg: var(--paper);
  --fg: var(--ink);
  --head: var(--orange-clear);
  --muted: var(--grey);
  --accent: var(--orange-clear);       /* rules and large type; #F47A20 is only 2.63:1 on light */
  --accent-text: var(--orange-deep);   /* links and small orange type */
  --surface: #F3F3F3;                  /* neutral, so the orange rule reads clean */
  --rule: rgba(36, 36, 36, .13);
  --edge: rgba(36, 36, 36, .30);
  --accent-wash: rgba(244, 122, 32, .08);
  color-scheme: light;

  /* type */
  --sans: "Work Sans", Arial, Helvetica, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* spacing, 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* docs */
  --doc-body: 1.0625rem;
  --doc-h1: clamp(1.9rem, 6vw, 2.6rem);
  --doc-h2: 1.5rem;
  --doc-h3: 1.125rem;
  --doc-measure: 760px;

  /* decks: geometry as a share of the slide, type in cqw (1cqw = 1% of slide width) */
  --deck-margin: 7.4%;
  --deck-text: 74.8%;
  --deck-logo: 9.2%;
  --deck-eyebrow: 1.67cqw;
  --deck-headline: 3.75cqw;
  --deck-title: 5cqw;
  --deck-body: 2.15cqw;
  --deck-code: 1.62cqw;
  --deck-num: 1.4cqw;
  --deck-dense-headline: 3.1cqw;
  --deck-dense-body: 1.72cqw;
  --deck-dense-code: 1.42cqw;
  --deck-appendix-code: 1.08cqw;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --bg: var(--ink);
    --fg: var(--ink-fg);
    --head: var(--orange);
    --muted: var(--grey-light);
    --accent: var(--orange);
    --accent-text: var(--orange);
    --surface: #2E2C29;
    --rule: rgba(230, 228, 225, .16);
    --edge: rgba(230, 228, 225, .34);
    --accent-wash: rgba(244, 122, 32, .14);
    color-scheme: dark;
  }
}

:root:where([data-theme="dark"]) {
  --bg: var(--ink);
  --fg: var(--ink-fg);
  --head: var(--orange);
  --muted: var(--grey-light);
  --accent: var(--orange);
  --accent-text: var(--orange);
  --surface: #2E2C29;
  --rule: rgba(230, 228, 225, .16);
  --edge: rgba(230, 228, 225, .34);
  --accent-wash: rgba(244, 122, 32, .14);
  color-scheme: dark;
}

/* Paper is always light, whatever the screen was showing. */
@media print {
  :root {
    --bg: var(--paper);
    --fg: var(--ink);
    --head: var(--orange-clear);
    --muted: var(--grey);
    --accent: var(--orange-clear);
    --accent-text: var(--orange-deep);
    --surface: #F3F3F3;
    --rule: rgba(36, 36, 36, .13);
    --edge: rgba(36, 36, 36, .30);
    --accent-wash: rgba(244, 122, 32, .08);
    color-scheme: light;
  }
}