:root {
  /* Surfaces */
  --pp-surface: #f7f9fc;
  --pp-surface-dim: #d8dadd;
  --pp-surface-bright: #f7f9fc;
  --pp-surface-container-lowest: #ffffff;
  --pp-surface-container-low: #f2f4f7;
  --pp-surface-container: #eceef1;
  --pp-surface-container-high: #e6e8eb;
  --pp-surface-container-highest: #e0e3e6;
  --pp-surface-variant: #e0e3e6;
  --pp-pure-white: #ffffff;
  --pp-background: #f7f9fc;

  /* Brand */
  --pp-primary: #002297;
  --pp-primary-container: #1e3aba;
  --pp-on-primary: #ffffff;
  --pp-on-primary-container: #aab5ff;
  --pp-inverse-primary: #bac3ff;
  --pp-soft-tint: #e6f2ff;
  --pp-secondary: #575e72;
  --pp-on-secondary: #ffffff;
  --pp-secondary-container: #d8dff7;
  --pp-tertiary: #00384e;
  --pp-tertiary-deep: #0b1324;
  --pp-tertiary-container: #00506e;
  --pp-on-tertiary: #ffffff;
  --pp-on-tertiary-container: #4ec6ff;
  --pp-accent-cyan: #38bdf8;

  /* Text */
  --pp-on-surface: #191c1e;
  --pp-on-surface-variant: #444654;
  --pp-text-muted: #64748b;
  --pp-outline: #757685;
  --pp-outline-variant: #c5c5d6;
  --pp-lab-border: #e2e8f0;
  --pp-inverse-surface: #2d3133;
  --pp-inverse-on-surface: #eff1f4;

  /* Status */
  --pp-success: #059669;
  --pp-error: #ba1a1a;

  /* Typography */
  --pp-font: "Montserrat", system-ui, sans-serif;
  --pp-hero-size: 2.75rem;
  --pp-hero-lh: 3.375rem;
  --pp-headline-lg: 2rem;
  --pp-headline-md: 1.375rem;
  --pp-headline-sm: 1.125rem;
  --pp-body-lg: 1rem;
  --pp-body-md: 0.875rem;
  --pp-body-sm: 0.75rem;
  --pp-label-caps: 0.6875rem;
  --pp-label-md: 0.8125rem;

  /* Spacing (8px rhythm) */
  --pp-space-2xs: 0.25rem;
  --pp-space-xs: 0.5rem;
  --pp-space-sm: 0.75rem;
  --pp-space-md: 1rem;
  --pp-space-lg: 1.5rem;
  --pp-space-xl: 2rem;
  --pp-space-2xl: 3rem;
  --pp-space-3xl: 4.5rem;
  --pp-gutter: 1rem;
  --pp-container-max: 1280px;

  /* Radius */
  --pp-radius-sm: 0.125rem;
  --pp-radius: 0.25rem;
  --pp-radius-md: 0.375rem;
  --pp-radius-lg: 0.5rem;
  --pp-radius-xl: 0.75rem;
  --pp-radius-full: 9999px;

  /* Elevation */
  --pp-shadow-card: 0 4px 16px -2px rgba(11, 19, 36, 0.08);
  --pp-shadow-nav: 0 12px 32px -4px rgba(11, 19, 36, 0.16);
  --pp-shadow-lift: 0 20px 35px -10px rgba(0, 34, 151, 0.08), 0 0 20px 2px rgba(56, 189, 248, 0.14);

  /* Bootstrap overrides */
  --bs-primary: #1e3aba;
  --bs-primary-rgb: 30, 58, 186;
  --bs-body-font-family: var(--pp-font);
  --bs-body-color: var(--pp-on-surface);
  --bs-body-bg: var(--pp-surface);
  --bs-border-color: var(--pp-lab-border);
  --bs-link-color: var(--pp-primary-container);
  --bs-link-hover-color: var(--pp-primary);
  --bs-border-radius: var(--pp-radius);
  --bs-border-radius-lg: var(--pp-radius-lg);
}

@media (min-width: 768px) {
  :root {
    --pp-gutter: 1.5rem;
    --pp-hero-size: 2.75rem;
  }
}

@media (min-width: 1025px) {
  :root {
    --pp-hero-size: 2.75rem;
  }
}