/* Influencer Finder design tokens (2026-10-14). app.css uses only these variables.
   Colours: Kavosh's own brand sheet (docs/brand): navy ink, brand blue for actions and the local share, slate for rules
   and the non-local share, off-white paper. One extra, a muted ochre, is used only for the engagement flag.
   Fonts: Schibsted Grotesk is Kavosh's face (kavosh.com.au), sturdy at size for the big reach numbers, so the tool reads as ours.
   IBM Plex Mono only on the invite slip and codes: the thing you copy, set like the docket on our site.
   Light mode only: showcase demos are light (house rule). Contrast pairs checked AA (ink-3 on paper 5.1:1, flag text 7.6:1). */
:root {
  --navy: #0F2747;
  --blue: #0B5ED7;          /* actions, links, focus, the "near you" share */
  --blue-700: #0849A8;      /* hover */
  --blue-100: #E2ECFB;
  --blue-50: #F1F6FD;
  --slate: #94A3B8;         /* brand slate: rules, the rest of the followers bar */
  --slate-200: #D5DCE6;
  --slate-100: #E9EDF3;
  --paper: #FFFFFF;
  --off: #F8FAFC;           /* brand off-white: app background */
  --ink: #0F2747;
  --ink-2: #3A4A63;         /* 9.6:1 on white */
  --ink-3: #5B6B82;         /* 5.1:1 on white */
  --ochre: #8A5A00;         /* engagement flag text, 7.6:1 on its tint */
  --ochre-100: #FBF1DC;
  --ochre-300: #E7C98A;
  --good: #1E6B47;          /* proven results */
  --good-100: #E3F2EA;
  --err: #B3261E;

  --bg: var(--off);
  --surface: var(--paper);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --accent: var(--blue);
  --accent-hover: var(--blue-700);
  --rule: var(--slate-200);
  --focus: var(--blue);

  --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-slip: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --fs-xs: 0.875rem;   /* 14 */
  --fs-sm: 0.9375rem;  /* 15 */
  --fs-base: 1.0625rem;/* 17 */
  --fs-md: 1.25rem;    /* 20 */
  --fs-lg: 1.625rem;   /* 26 */
  --fs-xl: 2.125rem;   /* 34 */
  --fs-2xl: 2.875rem;  /* 46 */
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.5;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --gutter: 16px;
  --side: 380px;            /* desktop search column */
  --max: 1320px;

  --r-1: 4px;               /* chips, inputs, bars */
  --r-2: 8px;               /* buttons, cards */
  --r-full: 999px;
  --shadow: 0 1px 2px rgb(15 39 71 / .06), 0 8px 24px -16px rgb(15 39 71 / .35);
  --tap: 48px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 150ms;
  --t-slow: 420ms;
}
@media (min-width: 900px) { :root { --gutter: 32px; } }
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-slow: 0ms; } }