/* Design tokens, from the Vital landing page reference. Fonts are vendored (static/vendor). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../vendor/fonts/inter/inter-latin-wght.260c81a4759b.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../vendor/fonts/fraunces/fraunces-latin-opsz-wght.069cb90e11a3.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* Colours */
  --bg: #f7f6f2;
  --surface: #ffffff;
  --ink: #14222e;
  --muted: #55636f;
  --line: #dfe3e6;
  --accent: #0b6e6e;
  --accent-hover: #095a5a;
  --accent-ink: #ffffff;
  --accent-soft: #e0efee;
  --blue: #1f4e8c;
  --focus: #1f4e8c;
  --hero-from: #0d2a3f;
  --hero-to: #0b5c5f;
  --hero-ink: #f3f7f8;
  --hero-accent: #8fe0d9;
  --logo-plate: transparent;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;

  /* Shape */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgb(20 34 46 / 0.04), 0 8px 24px rgb(20 34 46 / 0.06);
  --shadow-lg: 0 24px 60px rgb(5 20 32 / 0.28);

  /* Layout */
  --wrap: 1120px;
  --gutter: 16px;
  --header-h: 64px;
}

/* Breakpoints (custom properties can't be used in media queries):
   860px — grids collapse to one column; 560px — compact header. */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f171e;
    --surface: #16212b;
    --ink: #e6ecef;
    --muted: #9fb0bb;
    --line: #263642;
    --accent: #4fc1bb;
    --accent-hover: #74d2cd;
    --accent-ink: #0f171e;
    --accent-soft: #173836;
    --blue: #8fb6ec;
    --focus: #8fb6ec;
    --hero-from: #0a1a26;
    --hero-to: #0b3d40;
    /* The logo's wordmark is dark navy: give it a light plate on dark backgrounds. */
    --logo-plate: #f3f7f8;
    --shadow: none;
    --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.45);
  }
}