/* Bookr design tokens — the single source.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * Before it, there was no canonical token file. Every page carried its own `:root` inside an
 * inline <style>, and they had drifted:
 *
 *   --font    redeclared in 58 files      --mono   redeclared in 62
 *   --dim     .50 on index.html, .26 on business.html and 404.html
 *   --red     #E05252 on business.html, #DC2626 on my-bookings.html
 *   16 files hardcoded font-family:"Geist" and bypassed --font entirely
 *   1,035 hardcoded border-radius values, and zero spacing/easing/duration tokens
 *
 * The practical cost: changing the typeface meant ~75 edits, and changing the background
 * meant 48. Both are now one edit here.
 *
 * LOAD ORDER — this must come AFTER fonts.css and BEFORE bookr-shared.css:
 *   <link rel="stylesheet" href="/assets/fonts.css">
 *   <link rel="stylesheet" href="/assets/bookr-tokens.css">
 *   <link rel="stylesheet" href="/assets/bookr-shared.css">
 *   <link rel="stylesheet" href="/assets/bookr-mobile.css">
 * Page-level <style> blocks come later still, so a page CAN override — but should only do so
 * for something genuinely local. If you find yourself redeclaring a token here, it belongs here.
 */

:root {
  /* ── Canvas ──────────────────────────────────────────────────────────────────────────
   * Pure black, not the #0A0A0F it used to be. Owner's call, and the right one: a
   * near-black-plus-one-accent shell is one of the three looks that currently reads as
   * template AI design, and #0A0A0F is that look's exact fingerprint. #000 is a decision.
   */
  --ink:        #000000;
  --paper:      #FAFAF8;
  --text:       #FAFAF8;   /* app-vocabulary alias of --paper; 16 pages were written this way */

  /* Raised surfaces. Deliberately near-black rather than grey cards on a grey field —
   * on a true black canvas, separation comes from the hairline, not from a lighter fill. */
  --bg:         #000000;   /* alias of --ink, for the pages written in the app vocabulary */
  --bg1:        #08080A;
  --bg2:        #0E0E11;
  --bg3:        #16161A;

  /* ── Brand ───────────────────────────────────────────────────────────────────────────
   * Bookr blue stays. It is the one thing the owner explicitly kept, and it is the only
   * hue in the system that means "Bookr" rather than "state".
   */
  --blue-deep:  #1D4ED8;   /* pressed/hover, and the dark stop of the cover-photo placeholder */
  --blue:       #2563EB;
  --blue2:      #3B82F6;
  /* The same blue as a bare "r,g,b" triple, so a tinted ground can be written
   * rgba(var(--blue-rgb), .12) instead of rgba(37,99,235,.12).
   *
   * This exists because of a real bug. A Studio+ business can set its own accent colour, and
   * business.html applied it by overriding --blue and --blue2 — but the booking page also
   * carried 23 hardcoded rgba(37,99,235,…) tints and 10 hardcoded hexes, none of which any
   * override could reach. So an owner who picked green got a handful of green elements on a
   * page that was still, overwhelmingly, Bookr blue. "I made it green and it's still blue."
   *
   * Anything that should follow a business's accent must go through a variable. Keep this
   * triple in step with --blue; scripts/check-accent.mjs enforces both halves.
   */
  --blue-rgb:   37,99,235;
  --blue2-rgb:  59,130,246;   /* same idea for --blue2 */
  --accent:     var(--blue);   /* app-vocabulary alias — an ALIAS, so it must follow --blue */
  --accent2:    var(--blue2);
  --accent-bg:     rgba(var(--blue-rgb),.15);
  --accent-border: rgba(var(--blue-rgb),.35);

  /* ── State ───────────────────────────────────────────────────────────────────────────
   * Green = money settled / confirmed. Amber = waiting on someone. Red = it failed.
   *
   * --amber was #D97757, a terracotta. Terracotta-on-warm is half the signature of the most
   * common AI design look right now, and it also read as "error" more than "waiting" on a
   * dark field. Replaced with a true gold-amber, which is unambiguously caution.
   *
   * ⚠️ That retirement was HALF-APPLIED for weeks, and the reason is worth keeping.
   * Only the token moved. Every page that needed a tinted GROUND behind a chip or an icon
   * had hard-coded its own `rgba(217,119,87,…)`, because there was no --*-tint token to
   * reach for. So on 2026-08-11 the audit found #D97757 shipping 31 times against exactly
   * one occurrence of #E9A13B — its own definition, right here — and rules like
   * `.bcard-status.pending { background: rgba(217,119,87,.14); color: var(--amber); }`
   * painting gold text on a terracotta ground. Two different oranges inside one chip.
   *
   * The --*-tint values below exist so nobody has to type a literal again, and so the next
   * palette change cannot be half-applied. `npm run check:palette` enforces it.
   */
  --green:         #1F8A5B;
  --green2:        #2EA76E;
  --green-bg:      rgba(31,138,91,.15);
  --green-border:  rgba(31,138,91,.30);

  --amber:         #E9A13B;
  --amber-bg:      rgba(233,161,59,.13);
  --amber-border:  rgba(233,161,59,.32);

  /* #E05252 over #DC2626: the softer red is legible on true black without vibrating,
   * and it was already the value on the booking page, which is where it matters most. */
  --red:           #E05252;
  --red-bg:        rgba(224,82,82,.12);
  --red-border:    rgba(224,82,82,.32);

  /* ── Tints ───────────────────────────────────────────────────────────────────────────
   * The ground behind an icon, a status chip or a callout. --*-bg above is the FILL of a
   * chip; these are the lighter wash used under glyphs and panels. They were the missing
   * rung: without them every page invented its own rgba() and the palette drifted.
   *
   * --accent-tint is the only one that may be used decoratively. Green, amber and red
   * tints may ONLY appear where the element genuinely means settled / waiting / failed.
   * Decoration is blue. That is the whole rule.
   */
  --accent-tint:        rgba(var(--blue-rgb),.12);
  --accent-tint-strong: rgba(var(--blue-rgb),.18);
  --green-tint:         rgba(31,138,91,.12);
  --amber-tint:         rgba(233,161,59,.12);
  --red-tint:           rgba(224,82,82,.12);

  --sand:       #8E8E8C;

  /* ── Text on black ───────────────────────────────────────────────────────────────────
   * These are contrast decisions, not taste. Measured against #000:
   *   --paper  #FAFAF8            ~20.4:1   body, headings
   *   --muted  .55                ~5.9:1    secondary text — passes AA
   *   --dim    .50                ~5.1:1    tertiary text — passes AA
   *
   * --dim was .26 on business.html (36 usages) and 404.html, which computes to ~2.06:1 and
   * fails AA badly. index.html had already found this and moved to .50 with a note that .42
   * measured 3.94:1. The booking page — the page that takes money — was the worst offender.
   * .50 is now the single value. Do not lower it.
   */
  --muted:      rgba(250,250,248,.55);
  --dim:        rgba(250,250,248,.50);

  /* ── Lines and fills ─────────────────────────────────────────────────────────────────
   * On a true black canvas the hairline does the work that a drop shadow does elsewhere.
   */
  --border:     rgba(250,250,248,.08);
  --border2:    rgba(250,250,248,.14);
  --faint:      rgba(250,250,248,.04);
  --surface:    rgba(250,250,248,.06);
  --surface2:   rgba(250,250,248,.09);

  /* ── Type ────────────────────────────────────────────────────────────────────────────
   * THIS IS THE TYPEFACE SWAP POINT. Changing the two lines below changes the whole site,
   * which is the entire reason this file exists. Faces are self-hosted in assets/fonts/ and
   * declared in fonts.css — no CDN, no build step.
   */
  --font:       "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --mono:       "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Money must not jitter. Any element showing a price, a total or a countdown gets
   * `font-variant-numeric: var(--figures-tabular)` so digits share one advance width and
   * a column of prices stays aligned as values change. */
  --figures-tabular: tabular-nums;

  /* Bricolage's axes, named. A display face that is merely bolded is a wasted variable font —
   * these are the two settings that make a headline and a price row feel like different
   * voices from the same family. */
  --wdth-wide:   100;   /* headlines: full width, the characterful end */
  --wdth-normal: 92;    /* sub-heads */
  --wdth-tight:  84;    /* dense UI, long labels */

  /* ── Radius ──────────────────────────────────────────────────────────────────────────
   * There were 1,035 hardcoded border-radius values and exactly one --radius declaration.
   * Five steps is enough for every surface on this site.
   */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-full: 999px;

  /* ── Spacing ─────────────────────────────────────────────────────────────────────────
   * A 4px base. Named by step, not by intent, so they stay usable everywhere.
   */
  --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;

  /* ── Motion ──────────────────────────────────────────────────────────────────────────
   * 297 hand-written `transition:` declarations across 59 files, none sharing an easing.
   * One curve, three speeds. bookr-shared.css already kills all of it under
   * prefers-reduced-motion, so nothing here needs to repeat that.
   */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  120ms;
  --dur:       220ms;
  --dur-slow:  420ms;
}

/* Money, everywhere it appears. Applied as a class so it can be attached to a cell, a chip or
 * a whole table without repeating the property. */
.bk-num,
.bk-money {
  font-variant-numeric: var(--figures-tabular);
  font-feature-settings: "tnum" 1;
}