/* tokens.css — the one place a GoFlow colour is decided.
 *
 * There were three brand blues before this file. home.css said #0B8AD1,
 * admin.css said #0B8AD1, and chrome.css — the header sitting on top of both —
 * said #0280F8 in light mode and #0B8AD1 in dark. On /track all three met: the
 * buttons resolved to #0B8AD1 through var(--blue), the phone links were
 * hardcoded #0280F8, and <meta name="theme-color"> shipped #0280F8, so the
 * phone's own browser chrome was a different blue from the button beneath it.
 *
 * Greens had split the same way: #10B981 on the customer side, #22C55E on the
 * admin side, which meant one delivered order showed staff a different green
 * from the one the customer was looking at.
 *
 * The three stylesheets keep their own variable names — renaming them would
 * mean touching every page — but each now derives from the tokens here.
 * Change a brand colour in this file and it changes everywhere, once.
 *
 * Load this BEFORE any other stylesheet.
 */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────
   * #0B8AD1 wins on the count that matters: it is what both home.css and
   * admin.css already used, and what chrome.css's dark treatment used. Only
   * the light header disagreed. */
  --gf-blue:        #0B8AD1;
  --gf-blue-dark:   #0769A8;
  --gf-blue-light:  #38BDF8;
  --gf-blue-dim:    #E0F2FE;

  /* ── Ink ────────────────────────────────────────────────────────── */
  --gf-ink:         #0A1628;
  --gf-ink-mid:     #1E3A5F;
  --gf-ink-soft:    #334E68;

  /* ── Neutrals (light) ───────────────────────────────────────────── */
  --gf-text:        #0F172A;
  --gf-text-2:      #475569;
  --gf-text-3:      #94A3B8;
  --gf-border:      #E2E8F0;
  --gf-border-2:    #CBD5E1;
  --gf-surface:     #F8FAFC;
  --gf-surface-2:   #F1F5F9;
  --gf-white:       #FFFFFF;

  /* ── Neutrals (dark — the admin dashboard and the rider portal) ─── */
  --gf-d-bg:        #0F1117;
  --gf-d-surface:   #1A1D27;
  --gf-d-raised:    #21253A;
  --gf-d-hover:     #252940;
  --gf-d-border:    #2E3347;
  --gf-d-border-2:  #3D4460;
  --gf-d-text:      #F0F2F8;
  --gf-d-text-2:    #8B91A8;
  --gf-d-text-3:    #555C78;

  /* ── Navy theme — driver dashboard surfaces ── */
  --gf-navy:        #071426;
  --gf-navy-ink:    #0B8AD1;
  --gf-navy-ink-2:  #38BDF8;
  --gf-navy-surface:#0B1B30;
  --gf-navy-raised: #0F2640;
  --gf-navy-border: #1E3A5F;
  --gf-navy-text:   #F0F2F8;
  --gf-navy-text-2: #8B91A8;
  --gf-navy-text-3: #555C78;

  /* ── Status ─────────────────────────────────────────────────────────
   * One green, one amber, one red, whichever side of the business is
   * looking. The -dim variants are the tinted backgrounds behind badges;
   * light surfaces get a solid tint, dark ones an alpha so the surface
   * underneath still reads. */
  --gf-green:       #10B981;
  --gf-green-dim:   #D1FAE5;
  --gf-green-alpha: rgba(16,185,129,0.14);
  --gf-amber:       #F59E0B;
  --gf-amber-dim:   #FEF3C7;
  --gf-amber-alpha: rgba(245,158,11,0.14);
  --gf-red:         #EF4444;
  --gf-red-dim:     #FEE2E2;
  --gf-red-alpha:   rgba(239,68,68,0.14);
  --gf-orange:      #F97316;
  --gf-orange-alpha:rgba(249,115,22,0.14);
  --gf-purple:      #A855F7;
  --gf-purple-alpha:rgba(168,85,247,0.14);
  --gf-gray:        #6B7280;
  --gf-gray-alpha:  rgba(107,114,128,0.14);

  /* Text on a -dim background. A status pill needs a foreground dark enough
   * to read on its own tint, and those three colours were sitting as bare hex
   * inside the account page, which is how a parallel palette starts. */
  --gf-green-ink:   #065F46;
  --gf-amber-ink:   #92400E;
  --gf-blue-ink:    #1D4ED8;
  --gf-red-ink:     #B91C1C;

  /* ── Type ───────────────────────────────────────────────────────── */
  --gf-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── The shared nav ──────────────────────────────────────────────────
   *
   * The marketing nav is position: fixed, so it takes no space in the flow and
   * every page has to make room for it. Pages used to do that by hand, each
   * with its own number: the homepage's hero carried padding-top: 68px, and
   * /market's sticky bar assumed 62px, which was wrong by 6 and left a seam
   * under the nav. Fourteen pages, four different answers.
   *
   * This is the one number. It must equal the height on .nav__inner in
   * home.css, which is the only place the bar is actually sized - chrome.js
   * writes that markup into every page.
   */
  --gf-nav-h: 68px;

  /* The air between the top of a page and its first heading, below the nav.
   *
   * The homepage's <h1> sits 148px down: 68 for the nav, then this. Every
   * other page is set to the same figure, so a reader who moves between pages
   * does not feel the layout shift. */
  --gf-hero-air: 80px;

  /* The same on a phone, where 80px of a short viewport is a lot of scrolling
   * before the reader sees anything. */
  --gf-hero-air-sm: 48px;

  /* The scale. Six steps, and every surface uses them.
   *
   * These lived in forms.css, which only the account pages load, so the
   * rider portal could not reach them and had drifted to twenty distinct
   * font sizes: 10, 10.5, 11, 11.5, 12, 12.5, 13, 13.5, 14, 14.5 and up.
   * Half a pixel apart is drift, not design.
   *
   * 16px is deliberately absent from the scale and hardcoded on form inputs
   * instead: anything smaller makes iOS Safari zoom the page on focus, and
   * that is a browser constraint rather than a typographic decision. */
  --fs-xs:   11px;   /* uppercase micro labels, pills, tab bar labels */
  --fs-sm:   13px;   /* meta, hints, secondary text */
  --fs-base: 14px;   /* labels and dense interface text */
  --fs-md:   15px;   /* body prose, and the page default */
  --fs-lg:   18px;   /* card and section headings */
  --fs-xl:   24px;   /* page heading */

  /* Radii. Four, from nine. 99px and 999px both existed and did one job.
   *
   * Prefixed, like everything else here, because home.css and admin.css each
   * already define --r-sm and --r-md at their own values. Without the prefix
   * a shared component picks up whichever palette the page happens to load,
   * which is how the dashboard rail ended up with 10px corners on /account
   * and 8px on /send. Page stylesheets alias these below. */
  --gf-r-sm:    10px;
  --gf-r-md:    14px;
  --gf-r-lg:    18px;
  --gf-r-pill:  999px;

  /* ── Elevation ──────────────────────────────────────────────────── */
  --gf-shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --gf-shadow:      0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --gf-shadow-md:   0 8px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --gf-shadow-lg:   0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  --gf-shadow-blue: 0 8px 32px rgba(11,138,209,0.25);

  /* The radius block that used to sit here declared --gf-r-sm, --gf-r and
   * --gf-r-lg and was never referenced by a single rule. The scale above
   * replaces it; keeping both left --gf-r-sm with two different values. */
}