/* styles/variables.css */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap');

:root {
  /* Color Palette */
  --primary-blue: #1657FF;
  --primary-blue-hover: #0E4BE3; /* 10% darker */
  --deep-navy: #0B2545;
  --sky-blue: #E8F1FF;
  --mid-blue: #4C8DFF;
  --white: #FFFFFF;
  --off-white: #F5F8FC;
  --text-grey: #5B6B82;
  --success-green: #22C55E;
  --warning-amber: #F5A623;
  --border-grey: #E1E8F2;

  /* Font Families & Typography */
  --font-headings: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-h1-desktop: 44px;
  --font-h2-desktop: 32px;
  --font-h1-mobile: 30px;
  --font-h2-mobile: 22px;

  /* Border Radii */
  --radius-btn: 12px;
  --radius-card: 16px;
  --radius-input: 10px;
  --radius-badge: 100px;
  --radius-icon-tile: 50%;

  /* Shadows */
  --shadow-card-normal: 0 4px 20px rgba(22, 87, 255, 0.08);
  --shadow-card-hover: 0 8px 30px rgba(22, 87, 255, 0.14);
  --shadow-btn: 0 4px 12px rgba(22, 87, 255, 0.15);
  --shadow-navbar: 0 4px 20px rgba(11, 37, 69, 0.05);
  --shadow-focus-glow: 0 0 0 3px rgba(22, 87, 255, 0.15);

  /* Layout Spacing */
  --max-width: 1280px;
  --section-padding-vertical-desktop: 100px;
  --section-padding-vertical-mobile: 56px;
}