/* ==========================================================================
   variables.css — design tokens for AI in Maritime
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand */
  --brand: #0B4F8C;
  --brand-hover: #083A6B;
  --brand-tint: #E6F1FA;

  /* Ink (text) */
  --ink: #0A1E33;
  --ink-muted: #4A5B6E;
  --ink-subtle: #8892A0;

  /* Surfaces */
  --canvas: #FFFFFF;
  --canvas-alt: #F7FAFC;
  --line: #DDE6EF;

  /* HSL primitives used by Tailwind config tokens */
  --border: 210 37% 90%;
  --input: 210 37% 90%;
  --ring: 207 85% 30%;
  --background: 0 0% 100%;
  --foreground: 210 67% 12%;

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Manrope', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Merriweather', Georgia, 'Times New Roman', serif;

  /* Layout widths */
  --w-page: 1200px;
  --w-feed: 720px;
  --w-prose: 660px;

  /* Letter spacing */
  --tracking-tightish: -0.02em;
  --tracking-widest2: 0.1em;

  /* Motion */
  --ease: 120ms ease;
}