/* TradieRing directions: shared tokens.
   Palette chosen by Kamyar (colorhunt, 2026-10-30). Only these four plus white and tints mixed from them. */
:root {
  /* Brand */
  --navy-900: #202734;   /* near-black navy: ink, dark ground */
  --navy-700: #36415A;   /* slate navy: tradie's bubbles, secondary ink on light */
  --sage-400: #B7D894;   /* sage: accent on dark, buttons on dark */
  --lime-100: #E0F8C7;   /* pale lime: light fields, highlights */
  --white: #ffffff;

  /* Tints mixed from the brand (no new hues) */
  --navy-950: #171d27;   /* darker than 900, for the phone screen on dark */
  --navy-800: #2a3345;   /* between 900 and 700: TradieRing's bubble on dark */
  --navy-500: #5d6880;   /* muted text on light: 5.6:1 on white */
  --navy-300: #a9b0bf;   /* muted text on dark: 7.4:1 on navy-900 */
  --navy-100: #eef0f4;   /* TradieRing's bubble on light, hairlines */
  --navy-050: #f6f7f9;   /* off-white ground */
  --lime-050: #f3fce9;   /* faint lime ground */
  --sage-600: #7fa65a;   /* sage darkened, only for small marks on white (not text) */

  /* Spacing (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* Radii: small scale, one big one for the device */
  --r-sm: 8px; --r-md: 14px; --r-bubble: 20px; --r-pill: 999px; --r-device: 44px;

  --tap: 48px;
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur: 420ms;
}

/* Type: Geist for everything (Kamyar, 2026-10-30), Geist Mono only for tiny details.
   Self-hosted from the npm package geist 1.8.2 (vercel/geist-font), SIL Open Font License (shared/fonts/OFL.txt). */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}