/* Leadfillr: design tokens. Copy of ~/.claude/skills/leadfillr-brand/assets/tokens.css (canonical). Direction: "Clean Blue".
   Structure from the chosen references (Stripe art · Attio clean · ServiceTitan simplicity · Roofr language);
   colours sampled from the Leadfillr logo (LinkedIn cover, 2026-09-29). Change the canonical file first. */
:root {
  /* Grounds + ink */
  --paper:        #FFFFFF;   /* page canvas, matches the transparent art */
  --paper-soft:   #F5F8FA;   /* soft cards / wells (Attio product-card move), cool tint */
  --ink:          #0A202E;   /* headlines, body: the logo wordmark's navy */
  --ink-2:        #475467;   /* secondary text: 7.7:1 on white */
  --ink-3:        #667085;   /* captions, meta: 5.0:1 on white */
  --ring:         rgb(10 32 46 / 0.10);  /* hairline rings instead of borders */
  --ring-strong:  rgb(10 32 46 / 0.16);
  --field-edge:   rgb(10 32 46 / 0.50);  /* input boundaries only: 3.3:1 on white (WCAG 1.4.11) */

  /* ONE accent family: the logo blues. UI uses only these (AA on white). */
  --accent:       #0E4C7F;   /* ocean blue (logo waves): CTA fill, focus rings, links; 8.9:1 on white */
  --accent-deep:  #062F64;   /* hover / pressed */
  --accent-text:  #296F96;   /* steel blue (logo arrow): the ONE highlighted headline phrase; 5.5:1 on white */
  --accent-tint:  #EEF5F9;   /* selected city chip, soft highlights */
  --error:        #B42318;   /* form errors only: 6.6:1 on white. Not a brand colour */
  /* Logo/art-only blues: never as text or UI fill */
  --logo-navy:    #0E3355;
  --logo-sky:     #5EABC3;

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --display-weight: 600;
  --display-tracking: -0.035em;   /* headlines ≥ 40px */
  --h2-tracking: -0.025em;
  --body-size: 1.0625rem;         /* 17px */
  --body-leading: 1.6;
  --measure: 40ch;                /* support copy max width */

  /* Radius (concentric: inner = outer − padding) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;                   /* largest card radius. Nothing exceeds it except pills */
  --r-pill: 9999px;               /* buttons, city chips */

  /* Spacing rhythm */
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --container: 72rem;             /* 1152px */
  --gutter: clamp(1rem, 4vw, 2rem);
  --tap: 44px;                    /* minimum tap target */

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 160ms;                /* hovers */
  --t-base: 240ms;                /* reveals: max 300ms */
}