/* ==========================================================================
   CSS Variables - Realign Consulting Brand Colors
   ========================================================================== */

:root {
  /* Primary Colors - Muted Gem Tones */
  --electric-blue: #4A90B8;
  --dusty-blue: #7BA3B5;
  --navy: #2C3E50;
  --amethyst: #7B6B8D;
  --plum: #5D4E6D;
  
  /* Accent Colors */
  --marsala: #955251;
  --wine: #722F37;
  --seafoam: #5F9E8F;
  --hunter: #4A7C6F;
  --aqua: #6B9AAA;
  
  /* Neutral Colors */
  --cream: #F8F6F3;
  --light-gray: #E8E6E3;
  --medium-gray: #A8A5A0;
  --dark-gray: #5A5856;
  --charcoal: #3A3836;
  --off-white: #FDFCFB;
  
  /* Soft Accents */
  --blush: #D4B5B0;
  --rose: #C9A0A0;
  --khaki: #B5AA9A;
  --olive: #808D7C;
  
  /* Functional Colors */
  --text-primary: var(--charcoal);
  --text-secondary: var(--dark-gray);
  --text-muted: var(--medium-gray);
  --bg-primary: var(--off-white);
  --bg-secondary: var(--cream);
  --bg-accent: var(--light-gray);
  
  /* Typography */
  --font-heading: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Raleway', 'Helvetica Neue', sans-serif;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-slower: 800ms ease;
  
  /* Container */
  --container-max: 1200px;
  --container-narrow: 900px;
  --container-wide: 1400px;
}