/* Vanguard About — companion stylesheet
   Tailwind utilities come from the CDN script in the HTML; this file
   holds design tokens, base typography, and small custom utilities. */

:root {
  --background: #f6f7fa;
  --foreground: #0f1833;
  --card: #ffffff;
  --border: #e3e6ec;
  --muted: #f1f3f7;
  --muted-foreground: #6b7280;
  --primary: #0f1833;
  --primary-foreground: #f6f7fa;
  --accent: #1e6b6b;
  --accent-foreground: #f6f7fa;
  --secondary: #eef0f5;
  --radius: 0.5rem;
  --font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

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

/* Subtle scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(15, 24, 51, 0.25);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(15, 24, 51, 0.4); }

/* Focus ring matches accent */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}