/* ===========================================================================
   tokens.css — CANONICAL design-system token layer (single source of truth)
   ===========================================================================
   Loaded FIRST (before bb-public and every page sheet) via app/head-extras.tsx, so
   every legacy alias resolves to a value defined here.

   Phase 1 (canonical-tokens): lossless-by-construction. Canonical tokens hold
   the EXACT current values; legacy token names (--base-N, --_colors-rainbow---*,
   --_units---*, --bb-c-*, --bb-w-*, --bb-radius-*, --bb-font-*, --bb-ease-*)
   are redefined in their own files as aliases pointing here. Rendered result is
   visually identical to before.

   Net-new (referenced by nothing yet — visually inert):
     - motion durations (--motion-*)
     - outline ring (--outline-width / --outline-default). Convention: outlines
       use box-shadow rings, NOT borders, so they don't affect layout:
         box-shadow: 0 0 0 var(--outline-width) <color-token>;
   Naming: --color-{family}-{1..20}, --space-{level} (dash = decimal point;
   e.g. --space-4-5 = 4.5 x 0.85rem; --space-0-15 = 0.15 x 0.85rem).
   =========================================================================== */

:root {

  /* Colors — base ramp + white/black */
  --color-white: #ffffff;
  --color-black: #000;
  --color-base-1: #f5fdff;
  --color-base-2: #e8f9ff;
  --color-base-3: #d7f0fa;
  --color-base-4: #c8e8f4;
  --color-base-5: #b2d9e9;
  --color-base-6: #a6cfe2;
  --color-base-7: #91bfd4;
  --color-base-8: #80adc4;
  --color-base-9: #6f9db3;
  --color-base-10: #628da3;
  --color-base-11: #547d93;
  --color-base-12: #476b7f;
  --color-base-13: #3c5b6d;
  --color-base-14: #2f4c5b;
  --color-base-15: #1f3b49;
  --color-base-16: #193341;
  --color-base-17: #0e2935;
  --color-base-18: #071f28;
  --color-base-19: #04171e;
  --color-base-20: #011216;

  /* Colors — red */
  --color-red-1: #fff3f3;
  --color-red-2: #ffe6e8;
  --color-red-3: #ffdcde;
  --color-red-4: #ffd2d5;
  --color-red-5: #ffc5cb;
  --color-red-6: #ffb3bc;
  --color-red-7: #f79fa6;
  --color-red-8: #ef8e92;
  --color-red-9: #e8777f;
  --color-red-10: #dd626b;
  --color-red-11: #ce4952;
  --color-red-12: #c63e48;
  --color-red-13: #b73238;
  --color-red-14: #aa2731;
  --color-red-15: #a02030;
  --color-red-16: #931228;
  --color-red-17: #890a22;
  --color-red-18: #77011d;
  --color-red-19: #66001d;
  --color-red-20: #54001c;

  /* Colors — orange */
  --color-orange-1: #fff2eb;
  --color-orange-2: #ffeade;
  --color-orange-3: #ffe2cf;
  --color-orange-4: #ffd8bd;
  --color-orange-5: #ffcdab;
  --color-orange-6: #ffbf9c;
  --color-orange-7: #f9b08c;
  --color-orange-8: #ef9e7b;
  --color-orange-9: #ed8c6b;
  --color-orange-10: #e2745a;
  --color-orange-11: #d86348;
  --color-orange-12: #d15539;
  --color-orange-13: #cc4b32;
  --color-orange-14: #bc402b;
  --color-orange-15: #af3825;
  --color-orange-16: #a03322;
  --color-orange-17: #912a1c;
  --color-orange-18: #7f2112;
  --color-orange-19: #701910;
  --color-orange-20: #630e07;

  /* Colors — yellow */
  --color-yellow-1: #fffde9;
  --color-yellow-2: #fffcd4;
  --color-yellow-3: #fff8c7;
  --color-yellow-4: #fff2bd;
  --color-yellow-5: #ffeaae;
  --color-yellow-6: #ffe2a1;
  --color-yellow-7: #ffd88a;
  --color-yellow-8: #f9ce78;
  --color-yellow-9: #f7c663;
  --color-yellow-10: #f5b858;
  --color-yellow-11: #f7a94b;
  --color-yellow-12: #f29e38;
  --color-yellow-13: #ed9515;
  --color-yellow-14: #dd8512;
  --color-yellow-15: #d17609;
  --color-yellow-16: #c46905;
  --color-yellow-17: #af5700;
  --color-yellow-18: #914500;
  --color-yellow-19: #7a3700;
  --color-yellow-20: #632f00;

  /* Colors — green */
  --color-green-1: #f4fff3;
  --color-green-2: #e4f9e4;
  --color-green-3: #d3f4d3;
  --color-green-4: #c5edc5;
  --color-green-5: #b0e2b1;
  --color-green-6: #a0d8a3;
  --color-green-7: #8bc98b;
  --color-green-8: #7abc7a;
  --color-green-9: #66ad66;
  --color-green-10: #58a058;
  --color-green-11: #479147;
  --color-green-12: #387f38;
  --color-green-13: #2f752f;
  --color-green-14: #216821;
  --color-green-15: #1b5e1b;
  --color-green-16: #185418;
  --color-green-17: #124912;
  --color-green-18: #0b420b;
  --color-green-19: #073a07;
  --color-green-20: #033003;

  /* Colors — blue */
  --color-blue-1: #e6fbff;
  --color-blue-2: #d1f6ff;
  --color-blue-3: #bdedff;
  --color-blue-4: #a8eaff;
  --color-blue-5: #92e3fc;
  --color-blue-6: #84d6f4;
  --color-blue-7: #75cceb;
  --color-blue-8: #67bfe5;
  --color-blue-9: #5ab0e0;
  --color-blue-10: #449dd3;
  --color-blue-11: #328fc9;
  --color-blue-12: #3483bf;
  --color-blue-13: #3077b7;
  --color-blue-14: #206ba8;
  --color-blue-15: #15629b;
  --color-blue-16: #165b93;
  --color-blue-17: #064e84;
  --color-blue-18: #014577;
  --color-blue-19: #003a66;
  --color-blue-20: #003454;

  /* Colors — purple */
  --color-purple-1: #f5f9ff;
  --color-purple-2: #ebf2ff;
  --color-purple-3: #e1eaff;
  --color-purple-4: #d9e3ff;
  --color-purple-5: #cfdaff;
  --color-purple-6: #c5d0ff;
  --color-purple-7: #b3c3f2;
  --color-purple-8: #a2b3ed;
  --color-purple-9: #91a7e8;
  --color-purple-10: #8398e2;
  --color-purple-11: #7c87d8;
  --color-purple-12: #6c73c4;
  --color-purple-13: #6064ba;
  --color-purple-14: #5057aa;
  --color-purple-15: #454f9b;
  --color-purple-16: #3c488e;
  --color-purple-17: #2f3f7f;
  --color-purple-18: #283a72;
  --color-purple-19: #1e3263;
  --color-purple-20: #162954;

  /* Spacing — 0.85rem scale (dash = decimal) */
  --space-0: 0rem;
  --space-0-15: .1275rem;
  --space-0-25: .2125rem;
  --space-0-5: .425rem;
  --space-0-75: .6375rem;
  --space-1: .85rem;
  --space-1-25: 1.0625rem;
  --space-1-5: 1.275rem;
  --space-1-75: 1.4875rem;
  --space-2: 1.7rem;
  --space-2-25: 1.9125rem;
  --space-2-5: 2.125rem;
  --space-2-75: 2.3375rem;
  --space-3: 2.55rem;
  --space-3-25: 2.7625rem;
  --space-3-5: 2.975rem;
  --space-3-75: 3.1875rem;
  --space-4: 3.4rem;
  --space-4-25: 3.6125rem;
  --space-4-5: 3.825rem;
  --space-4-75: 4.0375rem;
  --space-5: 4.25rem;
  --space-5-25: 4.4625rem;
  --space-5-5: 4.675rem;
  --space-5-75: 4.8875rem;
  --space-6: 5.1rem;
  --space-6-25: 5.3125rem;
  --space-6-5: 5.525rem;
  --space-6-75: 5.7375rem;
  --space-7: 5.95rem;
  --space-7-25: 6.1625rem;
  --space-7-5: 6.375rem;
  --space-7-75: 6.5875rem;
  --space-8: 6.8rem;
  --space-8-25: 7.0125rem;
  --space-8-5: 7.225rem;
  --space-8-75: 7.4375rem;
  --space-9: 7.65rem;
  --space-9-25: 7.8625rem;
  --space-9-5: 8.075rem;
  --space-9-75: 8.2875rem;
  --space-10: 8.5rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-card: 18px;
  --radius-pill: 9999px;

  /* Fonts — the platform's OWN self-hosted families (design-system/fonts/, served from
     /design-system/fonts/<family>/fonts.css; @font-face links live in app/head-extras.tsx).
     Each stack is: the real family, then that family's shipped metric-override aliases, then
     a generic last resort. The aliases are `local()`-only @font-face rules that fail through
     when the named local font is absent, so the chain self-selects per platform and the
     font-display:swap fallback occupies the same space as the real face (no layout shift).
     NOTE: the Segoe + Roboto aliases ship WITHOUT size-adjust (the generator could not measure
     those faces), so they are vertically matched but only partially metric-matched. */
  --font-title: "Burrow Title", "Burrow Title Fallback system-ui", "Burrow Title Fallback Arial", "Burrow Title Fallback Helvetica", "Burrow Title Fallback Segoe", "Burrow Title Fallback Roboto", system-ui, sans-serif;
  --font-body: "Burrow Body", "Burrow Body Fallback system-ui", "Burrow Body Fallback Arial", "Burrow Body Fallback Helvetica", "Burrow Body Fallback Segoe", "Burrow Body Fallback Roboto", system-ui, sans-serif;
  --font-writing: "Burrow Script", "Burrow Script Fallback system-ui", "Burrow Script Fallback Arial", "Burrow Script Fallback Helvetica", "Burrow Script Fallback Segoe", "Burrow Script Fallback Roboto", cursive;

  /* Tracking (letter-spacing) — ONE lever per family.
     ⭐ Adjusting these three values retunes tracking PLATFORM-WIDE, per family: --tracking-title
     drives every kit display heading, --tracking-body every kit control, --tracking-writing every
     .bb-script / script accent. They were SEEDED at the values those call sites carried literally
     before the fonts changed (so introducing them was visually inert) and have since been RETUNED
     BY THE FOUNDER against labelled side-by-side comparisons. All three now sit LOOSER than the
     Adobe faces they replaced, because Burrow Title/Body set noticeably tighter:
         title    -0.011em -> +0.004em -> +0.009em -> +0.014em
         body     -0.003em -> +0.003em -> +0.006em -> +0.009em
         writing  -0.022em -> -0.017em    (one 0.005em step, matching the title increment: script
                                           accents render inline beside titles at display sizes,
                                           so they move by the same step)
     ⭐ THE PUBLIC PAGES RIDE THIS LEVER TOO, VIA A PRESERVED DELTA. Every title-family display
     heading in bb-public.css (plus .sk-afm-title and .bb-adm-brand) is written
         letter-spacing: calc(var(--tracking-title) +/- <delta>em)
     where <delta> = (the heading's original hand-tuned value) - (-0.011em). -0.011em is the
     family default those headings were authored against — the title seed value at the top of
     this comment, i.e. what filson-pro's own tracking was. So each heading keeps its exact
     optical offset from its siblings while the whole set follows the founder's chosen family
     value. Extend the pattern the same way: a new public title heading writes its offset as a
     delta from -0.011em, never as an absolute em.
     ⚠️ THIS REVERSES THE EARLIER STANCE, and the earlier stance was not wrong when it was
     written. While every page rendered the SAME face, a per-heading absolute value WAS a
     self-contained optical choice for one headline at one size, and wiring it to a family lever
     would only have coupled unrelated decisions. A FACE CHANGE breaks that: the values stop
     describing an optical relationship and start describing a font that is no longer installed.
     Landing the Burrow families left 28 public headings on filson-era tracking (-0.005 to
     -0.028em) while this token read +0.014em — a 0.025em gap the founder saw on /join.
     THE LESSON: an absolute value tuned to a face is only safe while the face is fixed.
     ⚠️ NOT everything with a letter-spacing follows this. Large POSITIVE tracking (0.1-0.22em)
     on small bold body-face eyebrows, markers, tags and badges is a deliberate LOOK, not a
     font-metric artifact — those stay absolute. Only negative/near-zero optical tightening on
     the TITLE face is delta-wired. */
  --tracking-title: 0.014em;
  --tracking-body: 0.009em;
  --tracking-writing: -0.017em;

  /* Script-accent scale — ONE size lever for the whole handwriting face.
     ⭐ Every rule that sizes the script face multiplies its own value by this, so the
     accents keep their relative proportions (1.42em / 1.32em / 1.25em / 2.84em / 1.3rem)
     while one edit retunes all of them together. It was seeded at 1, so introducing it was
     visually inert; it now carries the founder's chosen value.
     WHY A SCALE AND NOT A SIZE: those per-rule values were hand-tuned against
     felt-tip-woman, whose x-height sat much lower relative to the title face than Burrow
     Script's does — so the whole SET is proportionally off, not any one of them
     individually. A scale corrects the set and preserves the founder's relative tuning;
     a single shared size would throw that tuning away.
     0.77 is the FOUNDER'S SELECTED VALUE (2026-09-07), chosen by eye from a labelled
     comparison; it takes .bb-script from 1.42em to 1.093em. ⚠️ Do NOT read it as a derived
     constant — the two x-height parity figures are reference only. Against the 400 faces
     (Script 461 / Title 505) parity is 0.771, which is where the number originally came from;
     but .bb-script is authored at 600 and, the family shipping no 600, RENDERS at 700, where
     parity (Script 514 / Title 518) would be ~0.71. He was shown both and picked this. */
  --script-size-scale: 0.77;

  /* Eases (cubic-bezier preserved from --bb-ease-*) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-calm: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Motion durations (NET-NEW — unreferenced, for future use) */
  --motion-micro: 150ms;
  --motion-fast: 250ms;
  --motion-medium: 350ms;
  --motion-slow: 500ms;
  --motion-entrance: 1300ms;
  --motion-reveal: 2000ms;

  /* Outline ring (NET-NEW — convention: box-shadow, layout-neutral) */
  --outline-width: 1px;
  --outline-default: 0 0 0 var(--outline-width) var(--color-base-5);

  /* ── Backdrop frost ─────────────────────────────────────────────────────────
     THE home hero's frosted-glass treatment, and the ONLY blur the platform has.
     Written as the whole filter value, not as a length, so every consumer is
     byte-identical: `backdrop-filter: var(--backdrop-frost)` (with the -webkit-
     prefixed line beside it — Safari still needs it).

     ⛔ IT IS A SANCTIONED EXCEPTION, NOT A NEW DEFAULT. design-system §2a says
     "No glassmorphism / backdrop-blur". The Architect overrode that for the hero
     address fields (feedback 3e6a3315), then the Login button (3087273f), then
     the "See how it works" CTA (e16e9255) — three explicit instructions for one
     effect. A token exists because the value was being hand-copied a third time,
     NOT because blur has become a general treatment: reach for it only where the
     Architect has licensed it. docs/design-system.md §7 holds the register.

     ⭐ 3px, NOT the hero's original 10px, and the reason is load-bearing: the
     backdrop is a starfield of 1–2px points, and a large radius smears them out
     of existence — satisfying "blur" while failing "the stars are still visible
     faintly underneath it". Do not round it up.

     ⚠️ A BLUR BEHIND AN OPAQUE FILL SHOWS NOTHING. backdrop-filter filters what
     is behind the element; an element that then paints an opaque background over
     it displays none of the result. That is why the fields carry a 20% white fill
     and why their solid-white hover state quietly stops showing the blur. A
     consumer that looks unaffected is usually opaque, not misconfigured. */
  --backdrop-frost: blur(3px);
}