:root {
  /* Surface & Background Colors */
  --color-white: #ffffff;
  --color-bg-light: #f5f6f8;
  --color-bg-alt: #eceef1;
  --color-bg-dark: #141414;
  --color-bg-darker: #0c0c0c;
  --color-black: #000000;

  /* Typography Colors */
  --text-dark: #121212;
  --text-heading: #1a1a1a;
  --text-body: #4a4a4a;
  --text-muted: #737373;
  --text-light: #ffffff;
  --text-light-muted: #a3a3a3;

  /* Brand Accents - Regal Blue Palette */
  --brand-blue: #013f7a;
  --brand-blue-hover: #002d59;
  --brand-blue-light: #eaf1f8;
  --brand-blue-glow: rgba(1, 63, 122, 0.25);

  /* Borders & Dividers */
  --border-light: #e5e7eb;
  --border-subtle: #eeeeee;
  --border-dark: #262626;

  /* Typography Stack */
  --font-primary: 'Montserrat', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  /* Dimensions */
  --max-width: 1380px;
  --header-height: 80px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 50px;

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 0.3s var(--ease);
}