/* ============================================================================
   CSS VARIABLES (Custom Properties)

   Central location for all design tokens used across the site.
   Modify these values to change the theme globally.
   ============================================================================ */

:root {
  /* ===== Color Palette ===== */

  /* Primary Colors - Navy Blue Theme */
  --navy: #1e3a8a;
  --navy-dark: #172554;
  --navy-medium: #1e40af;
  --navy-light: #2563eb;

  /* Accent Colors - Blue Gradient */
  --sky-blue: #60a5fa;
  --light-blue: #93c5fd;
  --powder-blue: #dbeafe;
  --ice-blue: #e0f2fe;

  /* Background Colors */
  --section-dark: #0f172a;
  --section-medium: #1e293b;
  --card-bg: #1e3a8a;
  --card-hover: #2563eb;

  /* Text Colors */
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;

  /* UI Colors */
  --white: #ffffff;
  --border-color: #334155;


  /* ===== Typography ===== */
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;


  /* ===== Spacing ===== */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;
  --spacing-xxl: 80px;


  /* ===== Layout ===== */
  --container-max-width: 1200px;
  --container-padding: 20px;


  /* ===== Transitions ===== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.4s ease;


  /* ===== Shadows ===== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 5px 20px rgba(0, 0, 0, 0.3);


  /* ===== Border Radius ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 50px;


  /* ===== Z-Index Layers ===== */
  --z-index-background: 0;
  --z-index-content: 1;
  --z-index-header: 1000;
  --z-index-modal: 2000;
}