/* ==========================================================================
   Green Arch Associates - CSS Variables & Design Tokens
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-primary: #0088ce;
  --color-primary-hover: #0070aa;
  --color-primary-dark: #066aab;
  --color-secondary: #374a5e;
  --color-secondary-dark: #273171;
  --color-accent: #273171;
  --color-accent-coral: #ea5356;
  --color-accent-gold: #ffb923;
  --color-success: #2db742;
  --color-green-nature: #7ba035;
  --color-green-dark: #236838;
  --color-topbar-bg: #236838;
  
  /* Text & Surface Colors */
  --color-text-main: #363535;
  --color-text-dark: #1a1a1a;
  --color-text-muted: #5e6d7e;
  --color-text-light: #67768e;
  --color-white: #ffffff;
  --color-black: #000000;
  
  /* Backgrounds */
  --bg-body: #ffffff;
  --bg-light: #f7f9fb;
  --bg-gray: #f5f5f5;
  --bg-card: #f9f9f9;
  --bg-dark: #212121;
  --bg-navy: #1e293b;
  --bg-footer: #212121;
  
  /* Borders */
  --border-light: rgba(51, 51, 51, 0.1);
  --border-muted: rgba(0, 0, 0, 0.12);
  --border-primary: rgba(0, 136, 206, 0.2);
  
  /* Typography */
  --font-heading: "Gantari", sans-serif;
  --font-body: "Lato", sans-serif;
  --font-sub: "Roboto", sans-serif;
  
  /* Container & Layout */
  --container-max-width: 1200px;
  --container-padding: 20px;
  
  /* Box Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 10px 25px rgba(0, 0, 0, 0.06);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}