/* SlopTotal design tokens (light, dark, spacing, type). Kept in step with sloptotal.com. */
:root, [data-theme="light"] {
  --bg: #f3efe6;
  --surface: #ebe5d8;
  --surface-raised: #fffdf8;
  --surface-hover: #ece6d9;
  --border: #d9d2c3;
  --border-control: #8a8273;
  --text: #1a1814;
  --text-muted: #5d574c;
  --ink: #1a1814;
  --on-ink: #f3efe6;
  --link: #1a1814;
  --focus: #c8321f;
  --accent-soft: #f6e3dc;
  --brand: #1a1814;
  --brand-hover: #3a352d;
  --brand-soft: #ece6d9;
  --on-brand: #f3efe6;
  --night: #f3efe6;
  --night-hover: #ece6d9;
  --night-line: #d9d2c3;
  --night-text: #1a1814;
  --night-muted: #5d574c;
  --night-accent: #b3271a;
  --pen: #c8321f;
  --pen-text: #b3271a;
  --marker: #ffe27a;
  --paper-shadow: 0 1px 0 #d9d2c3, 0 18px 40px -24px rgba(60, 40, 10, 0.35);
  --verdict-clean-text: #1b7a4f;
  --verdict-clean-fill: #2b9a66;
  --verdict-clean-soft: #e9f6ee;
  --verdict-low-text: #4f7a28;
  --verdict-low-fill: #6c9a35;
  --verdict-low-soft: #eff5e3;
  --verdict-suspicious-text: #9a5b00;
  --verdict-suspicious-fill: #b88000;
  --verdict-suspicious-soft: #fdf3d8;
  --verdict-likely-text: #b54400;
  --verdict-likely-fill: #e05a12;
  --verdict-likely-soft: #fdeedf;
  --verdict-slop-text: #ce2c31;
  --verdict-slop-fill: #dc3e42;
  --verdict-slop-soft: #fdebec;
  --shadow-popover: 0 10px 28px rgba(60,40,10,0.14), 0 1px 2px rgba(60,40,10,0.1);
}
[data-theme="dark"] {
  --bg: #171512;
  --surface: #1f1c18;
  --surface-raised: #26231e;
  --surface-hover: #2e2a24;
  --border: #3a352d;
  --border-control: #7d7566;
  --text: #efe9dd;
  --text-muted: #b5ad9d;
  --ink: #efe9dd;
  --on-ink: #171512;
  --link: #efe9dd;
  --focus: #ff7a63;
  --accent-soft: #3a201a;
  --brand: #efe9dd;
  --brand-hover: #ffffff;
  --brand-soft: #2e2a24;
  --on-brand: #171512;
  --night: #171512;
  --night-hover: #2e2a24;
  --night-line: #3a352d;
  --night-text: #efe9dd;
  --night-muted: #b5ad9d;
  --night-accent: #ff8f7a;
  --pen: #ff7a63;
  --pen-text: #ff8f7a;
  --marker: rgba(255, 226, 122, 0.32);
  --paper-shadow: 0 1px 0 #000, 0 18px 40px -24px rgba(0, 0, 0, 0.6);
  --verdict-clean-text: #3dd68c;
  --verdict-clean-fill: #30a46c;
  --verdict-clean-soft: #132d21;
  --verdict-low-text: #a9d66a;
  --verdict-low-fill: #8fbf4a;
  --verdict-low-soft: #1d2914;
  --verdict-suspicious-text: #ffca16;
  --verdict-suspicious-fill: #e8b024;
  --verdict-suspicious-soft: #302008;
  --verdict-likely-text: #ff8b3e;
  --verdict-likely-fill: #f76b15;
  --verdict-likely-soft: #331e0b;
  --verdict-slop-text: #ff9592;
  --verdict-slop-fill: #e5484d;
  --verdict-slop-soft: #3b1219;
  --shadow-popover: 0 8px 24px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171512;
    --surface: #1f1c18;
    --surface-raised: #26231e;
    --surface-hover: #2e2a24;
    --border: #3a352d;
    --border-control: #7d7566;
    --text: #efe9dd;
    --text-muted: #b5ad9d;
    --ink: #efe9dd;
    --on-ink: #171512;
    --link: #efe9dd;
    --focus: #ff7a63;
    --accent-soft: #3a201a;
    --brand: #efe9dd;
    --brand-hover: #ffffff;
    --brand-soft: #2e2a24;
    --on-brand: #171512;
    --night: #171512;
    --night-hover: #2e2a24;
    --night-line: #3a352d;
    --night-text: #efe9dd;
    --night-muted: #b5ad9d;
    --night-accent: #ff8f7a;
    --pen: #ff7a63;
    --pen-text: #ff8f7a;
    --marker: rgba(255, 226, 122, 0.32);
    --paper-shadow: 0 1px 0 #000, 0 18px 40px -24px rgba(0, 0, 0, 0.6);
    --verdict-clean-text: #3dd68c;
    --verdict-clean-fill: #30a46c;
    --verdict-clean-soft: #132d21;
    --verdict-low-text: #a9d66a;
    --verdict-low-fill: #8fbf4a;
    --verdict-low-soft: #1d2914;
    --verdict-suspicious-text: #ffca16;
    --verdict-suspicious-fill: #e8b024;
    --verdict-suspicious-soft: #302008;
    --verdict-likely-text: #ff8b3e;
    --verdict-likely-fill: #f76b15;
    --verdict-likely-soft: #331e0b;
    --verdict-slop-text: #ff9592;
    --verdict-slop-fill: #e5484d;
    --verdict-slop-soft: #3b1219;
    --shadow-popover: 0 8px 24px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  }
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-full: 999px;
  --width-text: 680px;
  --width-page: 1120px;
  --header-height: 56px;
  --font-sans: "IBM Plex Sans", "Noto Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-wordmark: "Instrument Serif", Georgia, serif;
  --font-wordmark-mono: "DM Mono", ui-monospace, monospace;
}
.display { font-family: var(--font-sans); font-size: 44px; line-height: 50px; font-weight: 600; letter-spacing: -0.022em; }
.h1 { font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.018em; }
.h2 { font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.012em; }
.h3 { font-family: var(--font-sans); font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.006em; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; }
.score { font-family: var(--font-sans); font-size: 56px; line-height: 56px; font-weight: 600; letter-spacing: -0.03em; }
.stat { font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.025em; }
.data { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 400; }
.data-sm { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; }
.wordmark-slop { font-family: var(--font-wordmark); font-size: 26px; line-height: 26px; font-weight: 400; letter-spacing: 0.02em; font-style: italic; }
.wordmark-total { font-family: var(--font-wordmark-mono); font-size: 13px; line-height: 13px; font-weight: 500; letter-spacing: 0.15em; }