/* Design system v1. Semantic roles are the public styling interface. */
@font-face { font-family:"Space Grotesk"; src:url("fonts/SpaceGrotesk-Variable.ttf"); font-weight:300 700; font-display:swap; }
@font-face { font-family:Inter; src:url("fonts/Inter-Variable.ttf"); font-weight:100 900; font-display:swap; }
:root {
  --background:#f8f6f1;
  --text:#26334e;
  --text-muted:#58647b;
  --accent-light:#d7e9b0;
  --surface-subtle:#e5eaf4;
  --border:#cbd5e6;
  --surface-dark:#223e79;
  --brand:#315cb5;
  --surface:#fffefa;
  --portrait-background:#dce5ec;
  --illustration-blue:#dce5f5;
  --illustration-sage:#d9e7df;
  --illustration-sand:#eee0bf;
  --surface-dark-raised:#304e88;
  --text-inverse:#e6edf9;
  --border-inverse:#9bafcf;
  --accent-light-hover:#c6dda0;
  --surface-active:#edf2fa;
  --radius-card:24px;
  --radius-control:50px;
  --font-heading:"Space Grotesk",Arial,sans-serif;
  --font-body:Inter,Arial,sans-serif;
  --font-accent:"Space Grotesk",Arial,sans-serif;
  --weight-heading:500;
  --style-accent:normal;
  --nav-background:#fffefa;
  --nav-text:#26334e;
  --action:#006e63;
  --action-text:#ffffff;
  --action-hover:#00554d;
  --action-subtle:#e0eee7;
  --signal:#e7bd70;
  --action-inverse:#d7e9b0;
  --action-inverse-text:#26334e;
  --action-inverse-hover:#e4f0c9;
  }

:root {
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 96px;
  --content-width: 1200px; --reading-width: 65ch; --target-size: 48px;
  --radius-portrait: 18px; --radius-small: 6px;
}