:root {
  /* ==========================================================================
     BRAND COLOR PALETTE (Strictly Preserved from Original Identity)
     ========================================================================== */
  
  /* Master Color / Slate Brand */
  --color-primary: #697884;
  --color-primary-dark: #515e68;
  --color-primary-light: #83929e;
  --color-primary-rgb: 105, 120, 132;
  
  /* Highlight Color / Cerulean Blue */
  --color-highlight: #6fbfec;
  --color-highlight-hover: #58aee0;
  --color-highlight-rgb: 111, 191, 236;

  /* Button / Call to Action Ocean Blue (harmonious with slate brand & cerulean highlight) */
  --color-cta: #1d78b5;
  --color-cta-hover: #156396;
  --color-cta-rgb: 29, 120, 181;

  /* Accent color mapped to CTA Ocean Blue */
  --color-accent: var(--color-cta);
  --color-accent-hover: var(--color-cta-hover);
  --color-accent-rgb: var(--color-cta-rgb);

  /* Heading Color & Secondary Navy */
  --color-heading: #5f6f7d;
  --color-heading-dark: #3f4e5c;

  /* Footer & Dark Neutrals */
  --color-footer-bg: #252425;
  --color-footer-sub: #1a191a;

  /* Body & Surface Neutrals */
  --color-text-main: #222222;
  --color-text-muted: #6b7280;
  --color-text-light: #888888;
  --color-bg-page: #f8fafc;
  --color-bg-surface: #ffffff;
  --color-bg-subtle: #f1f5f9;
  
  /* Borders */
  --color-border: #e2e8f0;
  --color-border-hover: #cbd5e1;
  --color-border-active: #94a3b8;

  /* Alerts / Status */
  --color-success: #10b981;
  --color-error: #ef4444;

  /* ==========================================================================
     TYPOGRAPHY TOKENS
     ========================================================================== */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;

  /* Type Scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */

  /* ==========================================================================
     ELEVATION & SHADOWS
     ========================================================================== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 16px -2px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.10);
  --shadow-card-hover: 0 16px 32px -4px rgba(37, 36, 37, 0.12);
  --shadow-focus: 0 0 0 3px rgba(29, 120, 181, 0.35);

  /* ==========================================================================
     SPACING & LAYOUT
     ========================================================================== */
  --container-max-width: 1240px;
  --container-padding: 1.25rem;
  
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}