/* for the navigation */
:root {
  /* Colors */
  --color-bg: #050b18;
  --color-surface: #0b1224;
  --color-primary: #00d4ff;
  --color-primary-glow: rgba(0, 212, 255, 0.4);
  --color-text: #e6f1ff;
  --color-muted: #9fb3c8;
  --color-border: rgba(255, 255, 255, 0.08);
  /* Add these to your :root in variables.css */
--gradient-primary: linear-gradient(135deg, #00d4ff 0%, #0072ff 100%);
--hero-overlay: linear-gradient(to right, rgba(5, 11, 24, 0.9) 30%, rgba(5, 11, 24, 0.2) 100%);

  /* Typography */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing & Shapes */
  --radius-md: 10px;
  --radius-lg: 16px;
  --transition: all 0.3s ease;
  
  /* Hero Specific */
  --hero-height: 100vh;
  --overlay-dark: rgba(5, 11, 24, 0.75);
}

/* for the vehicle finace adviser */
:root {
  --bg: #0f1115;
  --card: #1a1d24;
  --primary: #4f8cff;
  --danger: #ff4d4f;
  --warning: #ffb020;
  --success: #22c55e;
  --text: #e6e6e6;
  --muted: #9aa0a6;

  --radius: 12px;
  --transition: 0.3s ease;
}