/*
 * The theme: color, type, spacing and shape tokens from docs/design/ux-design-guide.md. Both web apps link this one file,
 * so a change to the theme touches one place. Pages use the theme tokens (--color-*), never the brand tokens directly.
 */
:root {
  --brand-blue: #0033a1;
  --brand-red: #ce0e2d;
  --brand-gray: #b1b1b1;
  --brand-white: #ffffff;

  --color-primary: var(--brand-blue);
  --color-primary-contrast: var(--brand-white);
  --color-accent: var(--brand-red);
  --color-accent-contrast: var(--brand-white);
  --color-surface: var(--brand-white);
  --color-surface-muted: #f4f5f7;
  --color-text: #1a1a1a;
  --color-text-muted: #595959;
  --color-border: var(--brand-gray);
  --color-focus: var(--brand-blue);

  --color-success: #1e7e34;
  --color-warning: #8a5a00;
  --color-danger: var(--brand-red);
  --color-info: var(--brand-blue);

  --font-sans: 'Montserrat', 'Open Sans', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08);
  --shadow-md: 0 2px 8px rgb(0 0 0 / 0.12);
}