/* Homeless Services Learning Lab — generated from tokens.json by scripts/sync-design-system.mjs. Do not edit by hand. */
@font-face { font-family: "Newsreader"; src: url("/ds/fonts/Newsreader-Variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/ds/fonts/Newsreader-Italic-Variable.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/ds/fonts/PublicSans-Variable.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/ds/fonts/PublicSans-Italic-Variable.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("/ds/fonts/AtkinsonHyperlegibleMono-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --ground: #f5f6f4;
  --ground-mist: #f0f3ef;
  --ground-tide: #e5edeb;
  --surface: #ffffff;
  --ink: #06344a;
  --ink-soft: #2b4a58;
  --ink-muted: #54646b;
  --line: #d9e3e7;
  --line-strong: #7f969f;
  --harbor: #073c52;
  --teal: #16788a;
  --teal-deep: #0b6171;
  --teal-wash: #d7ecee;
  --gold: #f3c66b;
  --gold-hover: #f7d898;
  --gold-wash: #fbefd2;
  --coral: #e58a6c;
  --clay: #a2462a;
  --sage: #4f7d64;
  --action: #073c52;
  --action-hover: #0b6171;
  --on-action: #ffffff;
  --on-harbor: #ffffff;
  --on-gold: #073c52;
  --focus: #a35b2d;
  --steady: #1f6b4f;
  --steady-wash: #e4f1ea;
  --heads-up: #7a5200;
  --heads-up-wash: #fdf3dc;
  --urgent: #9b2f1f;
  --urgent-wash: #fbeae6;
  --info: #0b5670;
  --info-wash: #e6f1f5;
  --scrim: #06344acc;
  --shadow-hairline: 0 1px 0 #06344a14;
  --shadow-cover: 0 12px 28px #06344a20;
  --shadow-dialog: 0 24px 60px #06344a33;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --measure: 68ch;
  --page-max: 1200px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-arch: 240px;
  --radius-pill: 999px;
  --radius-panel: 24px;
  --radius-control: 999px;
  --duration-quick: 150ms;
  --duration-calm: 280ms;
  --ease-calm: cubic-bezier(0.2, 0, 0, 1);
  --font-display: "Public Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-sans: "Public Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-editorial: Newsreader, Georgia, "Times New Roman", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0a2230;
    --ground-mist: #0e2a39;
    --ground-tide: #123445;
    --surface: #10303f;
    --ink: #e8f1f3;
    --ink-soft: #c9dade;
    --ink-muted: #a9bec5;
    --line: #23485a;
    --line-strong: #5f8291;
    --harbor: #0b4a63;
    --teal: #6cc4cf;
    --teal-deep: #8fd5dd;
    --teal-wash: #164454;
    --gold: #f3c66b;
    --gold-hover: #f7d898;
    --gold-wash: #3a3016;
    --coral: #ef9f84;
    --clay: #f0b39d;
    --sage: #93c3a8;
    --action: #f3c66b;
    --action-hover: #f7d898;
    --on-action: #0a2230;
    --on-harbor: #ffffff;
    --on-gold: #0a2230;
    --focus: #f3c66b;
    --steady: #7fd0a9;
    --steady-wash: #12392d;
    --heads-up: #f3c66b;
    --heads-up-wash: #3a2e10;
    --urgent: #f4a593;
    --urgent-wash: #43201a;
    --info: #8cc9e0;
    --info-wash: #10364a;
    --scrim: #050f16d9;
    --shadow-hairline: 0 1px 0 #06344a14;
    --shadow-cover: 0 12px 28px #00000059;
    --shadow-dialog: 0 24px 60px #00000080;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0a2230;
  --ground-mist: #0e2a39;
  --ground-tide: #123445;
  --surface: #10303f;
  --ink: #e8f1f3;
  --ink-soft: #c9dade;
  --ink-muted: #a9bec5;
  --line: #23485a;
  --line-strong: #5f8291;
  --harbor: #0b4a63;
  --teal: #6cc4cf;
  --teal-deep: #8fd5dd;
  --teal-wash: #164454;
  --gold: #f3c66b;
  --gold-hover: #f7d898;
  --gold-wash: #3a3016;
  --coral: #ef9f84;
  --clay: #f0b39d;
  --sage: #93c3a8;
  --action: #f3c66b;
  --action-hover: #f7d898;
  --on-action: #0a2230;
  --on-harbor: #ffffff;
  --on-gold: #0a2230;
  --focus: #f3c66b;
  --steady: #7fd0a9;
  --steady-wash: #12392d;
  --heads-up: #f3c66b;
  --heads-up-wash: #3a2e10;
  --urgent: #f4a593;
  --urgent-wash: #43201a;
  --info: #8cc9e0;
  --info-wash: #10364a;
  --scrim: #050f16d9;
  --shadow-hairline: 0 1px 0 #06344a14;
  --shadow-cover: 0 12px 28px #00000059;
  --shadow-dialog: 0 24px 60px #00000080;
  color-scheme: dark;
}