/* Design tokens, derived from the Out Reach Out logo (assets-src/logo-original.jpg). */
:root {
  /* Globe blues */
  --ink: #0b1d3a;          /* deep ocean: text and dark sections */
  --ink-soft: #3a4a63;
  --brand: #0742b7;        /* figure blue: primary actions (8.2:1 on white) */
  --brand-strong: #05338f;
  --brand-tint: #e7eefb;

  /* The five figures. Decorative accents only; never body text on white
     (red and yellow don't reach 4.5:1). */
  --fig-red: #f20c1a;
  --fig-green: #079126;
  --fig-yellow: #fbc906;
  --fig-blue: #0742b7;
  --fig-black: #0e0f0f;

  --paper: #fbfcfe;
  --paper-2: #f0f3f9;
  --card: #ffffff;
  --line: #dde3ee;
  --muted: #56627a;

  --ok: #067a21;
  --warn: #9a6b00;
  --danger: #c10a15;

  --on-dark: #f4f7fc;
  --on-dark-muted: #aab6cc;

  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 112px;

  --shadow-1: 0 1px 2px rgb(11 29 58 / 6%), 0 1px 6px rgb(11 29 58 / 5%);
  --shadow-2: 0 12px 32px rgb(11 29 58 / 12%);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  --maxw: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
}