/* ============================================================
   ByLocals design tokens — v2, 19 Sep 2026
   CSS custom properties. Mirrors bylocals-tokens.json.
   Load order: fonts.css → this file.

   v1 was "Neighbourhood Press": cream paper, ink outlines, hard offset
   shadows, a monospace for every label. v2 is the founder's redesign: Urbanist
   throughout, five quiet colours (Alice Blue, Honeydew, Vanilla, Eerie Black,
   Ghost White), big soft corners, black pill buttons, a Vanilla pill behind the
   word that matters, and no hard shadow anywhere.

   EVERY TOKEN NAME FROM v1 IS KEPT. 12,000 lines of stylesheet read these
   names; changing the values here is what restyles every route at once, and
   renaming one would have been a rewrite for no reader's benefit. Some names
   now describe a role rather than a hue (`--bl-sun` is Vanilla, `--bl-sky` is
   the one saturated blue) and the comment beside each says which.
   ============================================================ */

:root {
  /* ---- colour · core ----
     Ghost White page, white cards, Eerie Black ink. `--bl-ink-soft` is darker
     than the style guide's grey on purpose: it has to clear 4.5:1 on all three
     pastel surfaces as well as on the page, and the guide's grey clears none. */
  --bl-paper: #F6F5FA;
  --bl-card: #FFFFFF;
  --bl-line: #DCDFE8;
  --bl-ink: #212121;
  --bl-ink-soft: #55585F;

  /* ---- colour · the three pastel surfaces, and the ink that reads on each ---- */
  --bl-green: #275E3D;        /* text-safe green — verified, confirmations */
  --bl-green-deep: #1C4A2F;
  --bl-green-tint: #CFDECA;   /* Honeydew */
  --bl-punch: #D6336C;        /* the vouch stamp; decorative sizes only */
  --bl-punch-deep: #A61E4D;   /* the same at small text sizes (≥4.5:1) */
  --bl-punch-tint: #FBE3EC;
  --bl-sun: #EFF0A3;          /* Vanilla — highlight and fill, never text */
  --bl-sun-deep: #56570F;     /* text on Vanilla */
  --bl-sun-tint: #F8F8D8;
  --bl-sky: #2340E8;          /* the one saturated colour — map pins, the admin lens */
  --bl-link-blue: #1F3BD0;    /* links; 8:1 on the page */
  --bl-sky-tint: #D8DFE9;     /* Alice Blue */

  /* ---- colour · semantic ---- */
  --bl-action: var(--bl-ink);             /* actions are black pills */
  --bl-action-hover: #000000;
  --bl-verified: var(--bl-green);
  --bl-vouch: var(--bl-punch);
  --bl-vouch-text-sm: var(--bl-punch-deep);
  --bl-highlight: var(--bl-sun);
  --bl-warning-surface: var(--bl-sun-tint);
  --bl-warning-text: var(--bl-sun-deep);
  --bl-link: var(--bl-link-blue);
  --bl-lens-audience: var(--bl-green);
  --bl-lens-owner: var(--bl-sun);
  --bl-lens-admin: var(--bl-sky);

  /* ---- colour · the hero, the word highlight, the decoration (new in v2) ----
     The front door is pastel (founder's choice, 19 Sep 2026): Alice Blue by day.
     `--bl-blush` is decoration only — shopfronts, tiles — and never carries text
     smaller than a heading. */
  --bl-hero-bg: var(--bl-sky-tint);
  --bl-hero-ink: var(--bl-ink);
  --bl-hero-ink-soft: #3D4047;
  --bl-hero-ring: rgba(255, 255, 255, 0.62); /* the white ring, part of a gradient — never a text surface */
  --bl-mark-bg: var(--bl-sun);
  --bl-blush: #F3D9D2;
  /* Vanilla AS TEXT, and only on Eerie Black (14:1) — the numbers on the dark
     band, the heading on the owner banner, the tick in a black disc. It is a
     separate name from `--bl-sun` on purpose: `--bl-sun` stays "never text",
     which `guard:contrast` enforces, because on every light surface it is
     unreadable. A rule that reaches for this token is saying which surface it
     is on. */
  --bl-on-dark-accent: #EFF0A3;
  --bl-field-line: #7C808A;   /* an input's edge: 3:1 against white (WCAG 1.4.11) */

  /* ---- type · one family ----
     `--bl-mono` keeps its name and is no longer a monospace: it was the label
     face, and labels are set in Urbanist now. `--bl-code` is the real monospace,
     for the few things that ARE code — a claim code, an id, a hash — where
     telling 0 from O and lining characters up is the point. */
  --bl-display: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bl-body: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bl-mono: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bl-code: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --bl-fs-mono-2xs: 0.8rem;
  --bl-fs-mono-xs: 0.85rem;
  --bl-fs-xs: 0.85rem;
  --bl-fs-sm: 0.95rem;
  --bl-fs-base: 1.0625rem;
  --bl-fs-md: 1.1875rem;
  --bl-fs-lg: 1.4rem;
  --bl-fs-xl: 1.85rem;
  --bl-fs-2xl: 2.3rem;
  --bl-fs-3xl: 3rem;
  --bl-fs-hero: clamp(2.4rem, 5.6vw, 4rem);

  --bl-lh-tight: 1.05;
  --bl-lh-snug: 1.18;
  --bl-lh-base: 1.55;

  /* Labels are sentence case at normal tracking. The two "mono" tracking tokens
     are kept so nothing that reads them breaks, and both now mean "none". */
  --bl-ls-display: -0.02em;
  --bl-ls-hero: -0.03em;
  --bl-ls-mono-wide: 0;
  --bl-ls-mono-wider: 0;

  /* ---- space (4px base) ---- */
  --bl-sp-1: 4px;  --bl-sp-2: 8px;  --bl-sp-3: 12px; --bl-sp-4: 16px;
  --bl-sp-5: 20px; --bl-sp-6: 24px; --bl-sp-7: 28px; --bl-sp-8: 32px;
  --bl-sp-9: 40px; --bl-sp-10: 48px; --bl-sp-12: 56px;

  /* ---- radius · big and soft ---- */
  --bl-r-chip: 999px;
  --bl-r-sm: 14px;
  --bl-r: 24px;
  --bl-r-lg: 32px;
  --bl-r-pill: 999px;

  /* ---- borders · hairlines ----
     v1 framed everything in ink: `bold` and `heavy` were 2px and 3px Ink rules
     round tables, tracks and page frames. They keep their names and their
     weights and lose the ink, so every frame that reads them softens at once.
     An edge that must be SEEN — an outlined pill, an input — asks for Ink or
     `--bl-field-line` by name in its own rule. */
  --bl-border-hairline: 1px solid var(--bl-line);
  --bl-border: 1px solid var(--bl-line);
  --bl-border-bold: 1.5px solid var(--bl-line);
  --bl-border-heavy: 2px solid var(--bl-line);
  /* The edge that carries a STATE — the selected choice, the current step, the
     open record. Ink, so the state is never a tint alone. */
  --bl-border-strong: 2px solid var(--bl-ink);

  /* ---- shadows · soft, and mostly absent ---- */
  --bl-shadow-sm: 0 1px 2px rgba(33, 33, 33, 0.05);
  --bl-shadow-btn: 0 0 0 rgba(33, 33, 33, 0);
  --bl-shadow: 0 1px 2px rgba(33, 33, 33, 0.04), 0 6px 20px rgba(33, 33, 33, 0.06);
  --bl-shadow-lift: 0 2px 4px rgba(33, 33, 33, 0.05), 0 14px 34px rgba(33, 33, 33, 0.1);
  --bl-shadow-modal: 0 24px 60px rgba(33, 33, 33, 0.22);

  /* ---- accessibility · context-safe two-tone focus ---- */
  --bl-focus-ring-inner: 3px solid var(--bl-paper);
  --bl-focus-ring-outer: 0 0 0 6px var(--bl-ink);

  /* ---- motion ---- */
  --bl-t-fast: 120ms ease;
  --bl-t-base: 150ms ease;
  --bl-t-rise: 300ms ease;
  --bl-ease-thunk: cubic-bezier(0.2, 1.6, 0.4, 1);
  --bl-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bl-ease-spring: cubic-bezier(0.3, 1.5, 0.5, 1);

  /* ---- sizing ---- */
  --bl-touch-min: 44px;
  --bl-container: 1120px;
  --bl-stamp-size: 66px;

  /* ---- prototype-compatible aliases (drop-in for v0.3 markup) ---- */
  --paper: var(--bl-paper); --card: var(--bl-card); --line: var(--bl-line);
  --ink: var(--bl-ink); --ink-soft: var(--bl-ink-soft);
  --green: var(--bl-green); --green-deep: var(--bl-green-deep); --green-tint: var(--bl-green-tint);
  --punch: var(--bl-punch); --punch-deep: var(--bl-punch-deep); --punch-tint: var(--bl-punch-tint);
  --sun: var(--bl-sun); --sun-deep: var(--bl-sun-deep); --sun-tint: var(--bl-sun-tint);
  --sky: var(--bl-sky); --sky-tint: var(--bl-sky-tint); --link: var(--bl-link);
  --r: var(--bl-r); --r-sm: var(--bl-r-sm);
  --display: var(--bl-display); --body: var(--bl-body); --mono: var(--bl-mono);
  --shadow: var(--bl-shadow); --shadow-lift: var(--bl-shadow-lift);
}