/* ============================================
   FINANCE AND BEYOND - ROOT CSS VARIABLES
   Complete Design System
   ============================================ */

:root {
  /* ==================== PRIMARY COLORS ==================== */
  --primary-navy: #1a1547; /* Deep navy from logo */
  --primary-gold: #d4af37; /* Elegant gold accent */
  --primary-white: #ffffff; /* Pure white */

  /* ==================== SECONDARY COLORS ==================== */
  --secondary-navy-light: #2a2557; /* Lighter navy shade */
  --secondary-navy-dark: #0f0a30; /* Darker navy shade */
  --secondary-gold-light: #e6c458; /* Lighter gold */
  --secondary-gold-dark: #b8941f; /* Darker gold */

  /* ==================== ACCENT COLORS ==================== */
  --accent-blue: #3d5a80; /* Professional blue accent */
  --accent-teal: #457b9d; /* Trustworthy teal */
  --accent-bronze: #cd853f; /* Warm bronze */

  /* ==================== NEUTRAL COLORS ==================== */
  --neutral-100: #f8f9fa; /* Lightest gray */
  --neutral-200: #e9ecef; /* Very light gray */
  --neutral-300: #dee2e6; /* Light gray */
  --neutral-400: #ced4da; /* Medium-light gray */
  --neutral-500: #adb5bd; /* Medium gray */
  --neutral-600: #6c757d; /* Medium-dark gray */
  --neutral-700: #495057; /* Dark gray */
  --neutral-800: #343a40; /* Darker gray */
  --neutral-900: #212529; /* Darkest gray */

  /* ==================== SEMANTIC COLORS ==================== */
  --success: #28a745; /* Success green */
  --warning: #ffc107; /* Warning yellow */
  --error: #dc3545; /* Error red */
  --info: #17a2b8; /* Info blue */

  /* ==================== BACKGROUND COLORS ==================== */
  --bg-primary: var(--primary-navy);
  --bg-secondary: var(--secondary-navy-light);
  --bg-light: var(--neutral-100);
  --bg-white: var(--primary-white);
  --bg-gold-gradient: linear-gradient(135deg, var(--primary-gold) 0%, var(--secondary-gold-dark) 100%);
  --bg-navy-gradient: linear-gradient(135deg, var(--primary-navy) 0%, var(--secondary-navy-dark) 100%);
  --bg-hero-gradient: linear-gradient(
    135deg,
    var(--primary-navy) 0%,
    var(--secondary-navy-light) 50%,
    var(--accent-blue) 100%
  );

  /* ==================== TEXT COLORS ==================== */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-light: var(--neutral-500);
  --text-white: var(--primary-white);
  --text-gold: var(--primary-gold);
  --text-navy: var(--primary-navy);

  /* ==================== BORDER COLORS ==================== */
  --border-light: var(--neutral-300);
  --border-medium: var(--neutral-400);
  --border-dark: var(--neutral-600);
  --border-gold: var(--primary-gold);
  --border-navy: var(--primary-navy);

  /* ==================== TYPOGRAPHY ==================== */
  /* Font Families */
  --font-primary: "Inter", "Segoe UI", Roboto, -apple-system, sans-serif;
  --font-heading: "Montserrat", "Inter", sans-serif;
  --font-accent: "Playfair Display", "Georgia", serif;
  --font-mono: "Fira Code", "Courier New", monospace;

  /* Font Sizes */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */
  --font-size-6xl: 3.75rem; /* 60px */
  --font-size-7xl: 4.5rem; /* 72px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* ==================== SPACING SYSTEM ==================== */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 2.5rem; /* 40px */
  --spacing-3xl: 3rem; /* 48px */
  --spacing-4xl: 4rem; /* 64px */
  --spacing-5xl: 5rem; /* 80px */
  --spacing-6xl: 6rem; /* 96px */

  /* ==================== BORDER RADIUS ==================== */
  --radius-none: 0;
  --radius-sm: 0.25rem; /* 4px */
  --radius-base: 0.5rem; /* 8px */
  --radius-md: 0.75rem; /* 12px */
  --radius-lg: 1rem; /* 16px */
  --radius-xl: 1.5rem; /* 24px */
  --radius-2xl: 2rem; /* 32px */
  --radius-full: 9999px; /* Circular */

  /* ==================== SHADOWS ==================== */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-2xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --shadow-gold: 0 8px 24px rgba(212, 175, 55, 0.3);
  --shadow-navy: 0 8px 24px rgba(26, 21, 71, 0.4);

  /* ==================== Z-INDEX SYSTEM ==================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ==================== TRANSITIONS ==================== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  --transition-slowest: 500ms ease-in-out;

  /* ==================== BREAKPOINTS ==================== */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ==================== CONTAINER WIDTHS ==================== */
  --container-xs: 100%;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;

  /* ==================== COMPONENT SPECIFIC ==================== */
  /* Buttons */
  --btn-padding-sm: var(--spacing-sm) var(--spacing-lg);
  --btn-padding-base: var(--spacing-md) var(--spacing-xl);
  --btn-padding-lg: var(--spacing-lg) var(--spacing-2xl);
  --btn-radius: var(--radius-base);

  /* Cards */
  --card-padding: var(--spacing-xl);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);

  /* Inputs */
  --input-padding: var(--spacing-md) var(--spacing-lg);
  --input-radius: var(--radius-base);
  --input-border: 1px solid var(--border-light);
  --input-focus-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);

  /* Header */
  --header-height: 80px;
  --header-bg: var(--bg-primary);

  /* ==================== GOLD VARIATIONS ==================== */
  --gold-10: rgba(212, 175, 55, 0.1);
  --gold-20: rgba(212, 175, 55, 0.2);
  --gold-30: rgba(212, 175, 55, 0.3);
  --gold-50: rgba(212, 175, 55, 0.5);
  --gold-70: rgba(212, 175, 55, 0.7);

  /* ==================== NAVY VARIATIONS ==================== */
  --navy-10: rgba(26, 21, 71, 0.1);
  --navy-20: rgba(26, 21, 71, 0.2);
  --navy-30: rgba(26, 21, 71, 0.3);
  --navy-50: rgba(26, 21, 71, 0.5);
  --navy-70: rgba(26, 21, 71, 0.7);
  --navy-90: rgba(26, 21, 71, 0.9);

  /* ==================== OVERLAY COLORS ==================== */
  --overlay-light: rgba(255, 255, 255, 0.9);
  --overlay-medium: rgba(0, 0, 0, 0.5);
  --overlay-dark: rgba(0, 0, 0, 0.7);
  --overlay-navy: rgba(26, 21, 71, 0.85);
  --overlay-gold: rgba(212, 175, 55, 0.15);
}

/* ==================== DARK MODE SUPPORT ==================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-light: var(--neutral-800);
    --text-primary: var(--neutral-100);
    --text-secondary: var(--neutral-300);
    --border-light: var(--neutral-700);
  }
}

/* ==================== UTILITY CLASSES ==================== */
.text-gold {
  color: var(--primary-gold);
}
.text-navy {
  color: var(--primary-navy);
}
.bg-gold {
  background-color: var(--primary-gold);
}
.bg-navy {
  background-color: var(--primary-navy);
}
.bg-gold-gradient {
  background: var(--bg-gold-gradient);
}
.bg-navy-gradient {
  background: var(--bg-navy-gradient);
}
.shadow-gold {
  box-shadow: var(--shadow-gold);
}
.shadow-navy {
  box-shadow: var(--shadow-navy);
}