/* Shared brand source for every portal route. Values: design-system.json v1.0.0. */
:root {
  color-scheme: light;
  --hos-ink: #171915;
  --hos-paper: #fbf8f1;
  --hos-surface: #fff;
  --hos-mist: #f0ede5;
  --hos-muted: #535950;
  --hos-line: #e1dccf;
  --hos-input-border: #827b6d;
  --hos-gold: #edaa20;
  --hos-gold-text: #805400;
  --hos-logo-gold: #946500;
  --hos-success: #24724e;
  --hos-warning: #805400;
  --hos-error: #a93828;
  --hos-info: #365e76;
  --hos-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --hos-serif: Georgia, "Times New Roman", serif;
  --hos-mono: "JetBrains Mono", Consolas, monospace;
  --hos-control-radius: 6px;
  --hos-card-radius: 16px;
  --hos-hero-radius: 24px;
  --hos-pill-radius: 999px;
  --hos-control-height: 48px;
  --hos-card-shadow: 0 9px 28px rgba(37,35,29,.05);
  --hos-control-duration: 180ms;
  --hos-ease: cubic-bezier(.22,1,.36,1);
  --hos-content-max: 1240px;
  --hos-wide-max: 1320px;
  --hos-page-gutter: 42px;
  /* Compatibility aliases keep existing quiz and page layout contracts intact. */
  --ink: var(--hos-ink);
  --paper: var(--hos-paper);
  --bg: var(--hos-paper);
  --surface: var(--hos-surface);
  --mist: var(--hos-mist);
  --glow: var(--hos-mist);
  --graphite: var(--hos-muted);
  --muted: var(--hos-muted);
  --line: var(--hos-line);
  --saffron: var(--hos-gold);
  --saffron-ink: var(--hos-gold-text);
  --accent: var(--hos-gold-text);
  --accent-ink: #fff;
  --accent-soft: var(--hos-mist);
  --green: var(--hos-success);
  --good: var(--hos-success);
  --amber: var(--hos-warning);
  --warn: var(--hos-warning);
  --red: var(--hos-error);
  --font-display: var(--hos-font);
  --font-body: var(--hos-font);
  --sans: var(--hos-font);
  --serif: var(--hos-serif);
  --font-mono: var(--hos-mono);
  --mono: var(--hos-mono);
  --radius-ui: var(--hos-control-radius);
  --radius-card: var(--hos-card-radius);
  --radius-pill: var(--hos-pill-radius);
  --r: var(--hos-card-radius);
  --ease: var(--hos-ease);
  --site-motion-control: var(--hos-control-duration);
  --site-motion-ease: var(--hos-ease);
}
@media(max-width:900px) { :root { --hos-page-gutter: 34px; } }
@media(max-width:600px) { :root { --hos-page-gutter: 21px; } }