:root {
  /* Brand palette from guidelines */
  --brand-blue-primary: #0D47A1;
  --brand-blue-dark: #082F6B;
  --brand-blue-secondary: #1F6FD2;
  --brand-red-primary: #E31E24;
  --brand-red-dark: #B91318;
  --brand-white: #FFFFFF;
  --brand-gray-light: #F5F7FA;
  --brand-gray-dark: #2E2E2E;
  --brand-gray-medium: #7A7A7A;
  --brand-blue-soft: #EAF3FF;
  --brand-red-soft: #FDECEC;
  --brand-green: #10B981;
  --brand-green-soft: #D1FAE5;
  --brand-line: #E7ECF3;
  --brand-bg: var(--brand-gray-light);
  --brand-surface: var(--brand-white);
  --brand-text: var(--brand-gray-dark);
  --brand-muted: var(--brand-gray-medium);
  --brand-shadow: 0 10px 30px rgba(8, 47, 107, 0.12);
  --brand-radius-sm: 8px;
  --brand-radius-md: 14px;
  --brand-radius-lg: 20px;
  --brand-font-display: 'Space Grotesk', sans-serif;
  --brand-font-body: 'Inter', sans-serif;
  --brand-font-mono: 'IBM Plex Mono', monospace;

  /* Compatibility aliases for existing pages */
  --blue: var(--brand-blue-primary);
  --blue-dark: var(--brand-blue-dark);
  --blue-secondary: var(--brand-blue-secondary);
  --blue-soft: var(--brand-blue-soft);
  --red: var(--brand-red-primary);
  --red-dark: var(--brand-red-dark);
  --red-soft: var(--brand-red-soft);
  --green: var(--brand-green);
  --green-soft: var(--brand-green-soft);
  --bg: var(--brand-bg);
  --surface: var(--brand-surface);
  --ink: var(--brand-text);
  --ink-soft: var(--brand-muted);
  --line: var(--brand-line);
  --c-blue-dark: var(--brand-blue-dark);
  --c-blue-main: var(--brand-blue-primary);
  --c-blue-light: var(--brand-blue-soft);
  --c-red-main: var(--brand-red-primary);
  --c-red-dark: var(--brand-red-dark);
  --c-white: var(--brand-white);
  --c-gray-text: var(--brand-gray-medium);
  --accent: var(--brand-red-primary);
  --navy: var(--brand-blue-dark);

  /* Buttons */
  --btn-primary-bg: var(--brand-red-primary);
  --btn-primary-hover: var(--brand-red-dark);
  --btn-secondary-bg: var(--brand-blue-primary);
  --btn-secondary-hover: var(--brand-blue-dark);
  --btn-outline-border: var(--brand-blue-primary);
  --btn-outline-hover-bg: var(--brand-blue-primary);
  --btn-outline-hover-text: var(--brand-white);
}

body {
  background-color: var(--brand-bg);
  color: var(--brand-text);
}

a {
  color: var(--brand-blue-primary);
}

a:hover {
  color: var(--brand-blue-dark);
}

.btn-brand-primary {
  background-color: var(--brand-red-primary);
  color: var(--brand-white);
  border-color: var(--brand-red-primary);
}

.btn-brand-primary:hover {
  background-color: var(--brand-red-dark);
  border-color: var(--brand-red-dark);
  color: var(--brand-white);
}

.btn-brand-secondary {
  background-color: var(--brand-blue-primary);
  color: var(--brand-white);
  border-color: var(--brand-blue-primary);
}

.btn-brand-secondary:hover {
  background-color: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
  color: var(--brand-white);
}

.btn-brand-outline {
  background-color: transparent;
  color: var(--brand-blue-primary);
  border: 1px solid var(--brand-blue-primary);
}

.btn-brand-outline:hover {
  background-color: var(--brand-blue-primary);
  color: var(--brand-white);
}

.section-surface {
  background-color: var(--brand-surface);
  color: var(--brand-text);
  border: 1px solid var(--brand-line);
}

.section-alt {
  background-color: var(--brand-bg);
}

::selection {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-dark);
}