/* ============================================================
   BASE — Reset, variables, typography defaults
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --navy: #0B1226;
  --navy-light: #131D3B;
  --navy-mid: #1A2744;
  --gold: #D4A843;
  --gold-light: #F0D078;
  --gold-dark: #B8922E;
  --white: #FFFFFF;
  --off-white: #F4F5F7;
  --grey-50: #F9FAFB;
  --grey-100: #E8EAF0;
  --grey-200: #CDD1DB;
  --grey-400: #8B92A5;
  --grey-600: #5A6178;
  --grey-800: #2E3347;
  --green: #22C55E;
  --green-bg: rgba(34,197,94,0.08);
  --red: #EF4444;
  --red-bg: rgba(239,68,68,0.07);
  --blue: #3B82F6;
  --blue-bg: rgba(59,130,246,0.06);
  --amber: #F59E0B;
  --amber-bg: rgba(245,158,11,0.07);
  --font-main: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --content-max: 860px;
  --page-max: 1200px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 3px rgba(11,18,38,0.04), 0 4px 16px rgba(11,18,38,0.06);
  --shadow-elevated: 0 8px 32px rgba(11,18,38,0.10), 0 2px 8px rgba(11,18,38,0.06);
  --shadow-soft: 0 1px 2px rgba(11,18,38,0.04);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font-main);
  background: var(--off-white);
  color: var(--grey-800);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}