/* ============================================
   Design tokens + resets — loaded on every page
   ============================================ */
:root {
  --teal: #0e90a9;
  --teal-dark: #0a768b;
  --teal-light: #eaf6f8;
  --orange: #e94e3c;
  --navy: #061d33;
  --navy-mid: #092c4d;
  --bg-light: #f4f9fb;
  --bg-lighter: #eaf2f5;
  --text-body: #45566b;
  --text-muted: #8598ab;
  --border-soft: rgba(6, 29, 51, 0.08);
  --white: #ffffff;

  --font-head: 'Outfit', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-card: 0 10px 30px rgba(6, 29, 51, 0.07);
  --shadow-card-hover: 0 18px 40px rgba(6, 29, 51, 0.12);
  --shadow-btn: 0 8px 20px rgba(14, 144, 169, 0.28);

  --sidebar-w: 250px;
  --topbar-h: 76px;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  margin: 0;
  color: var(--navy);
}

p { margin: 0; color: var(--text-body); line-height: 1.6; }

a { text-decoration: none; color: inherit; }

img, svg { display: block; max-width: 100%; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

button, input, select, textarea { font: inherit; }

ul { margin: 0; padding: 0; list-style: none; }