@layer design {
  :root {
    /* Brand */
    --primary: #1a237e;

    /* Warning — amber (MD3 amber-200). Informational "hall busy" signal,
       deliberately distinct from the pink error/tertiary family; contrast
       vs --on-warning-container is 10.5:1 (WCAG AA). */
    --warning-container: #ffe082;
    --on-warning-container: #3d2b00;

    /* Layout */
    --container-max-width: 75rem;

    /* Typography — modular scale */
    --heading-scale: 0.875;
    --h1-size: 2rem;
    --h2-size: calc(var(--h1-size) * var(--heading-scale));
    --h3-size: calc(var(--h2-size) * var(--heading-scale));
    --h4-size: calc(var(--h3-size) * var(--heading-scale));
    --h5-size: calc(var(--h4-size) * var(--heading-scale));
    --h6-size: calc(var(--h5-size) * var(--heading-scale));
    --monospace-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 3rem;

    /* Borders */
    --border-radius: 4px;

    /* Spinner */
    --spinner-size: 3rem;
    --spinner-border-width: 4px;
    --spinner-speed: 0.8s;
    --spinner-overlay: rgba(0, 0, 0, 0.25);
    --spinner-label-bg: rgba(0, 0, 0, 0.65);
  }
}