/* ============================================================
   Balance Farm — design tokens
   The single source for type, ink, spacing and radius. Loaded
   before every other stylesheet.

   Rules this system holds to:
   · Tracking is bound to size, never chosen per component — one
     step is one size AND one letterspacing.
   · Ink is one hue (#171512); pure black is never used directly.
   · Surfaces are separate ladders from text ink, so a fill and a
     label can't be confused for the same value: --fill-* over the
     page, --tint-* over frosted chrome.
   · No component may introduce a colour literal. A value that has
     no token needs a token, not an exception.
   ============================================================ */

:root {
  /* ---- Type -------------------------------------------------
     Each step pairs a size with the tracking that suits it:
     large type needs tighter tracking, small type needs looser.
     Use the pair together; never mix a size with another's tracking. */
  /* Responsive step-downs must land on a LOWER STEP of this scale, never on
     an in-between value — that habit is what produced 24 sizes. */
  --t-2xs:      12px;   --t-2xs-track: -0.01em;   /* price pills, meta */
  --t-xs:       14px;   --t-xs-track:  -0.01em;   /* dense UI, small CTAs */
  --t-sm:       16px;   --t-sm-track:  -0.01em;   /* body / UI default */
  --t-base:     18px;   --t-base-track: -0.02em;  /* captions, long-form body */
  --t-md:       20px;   --t-md-track:  -0.02em;   /* emphasis, answers */
  --t-lg:       24px;   --t-lg-track:  -0.02em;   /* subheads, totals */
  --t-xl:       32px;   --t-xl-track:  -0.03em;   /* panel titles */
  --t-2xl:      40px;   --t-2xl-track: -0.03em;   /* sheet titles, dates */
  --t-5xl:      56px;   --t-5xl-track: -0.03em;   /* large headings */
  --t-6xl:      72px;   --t-6xl-track: -0.03em;   /* display */
  --t-7xl:      80px;   --t-7xl-track: -0.05em;   /* review quotes, the largest */

  /* Fluid steps are composed from the fixed ones above, so they can also be
     used as clamp endpoints elsewhere. */
  --t-3xl: clamp(var(--t-xl), 4.45vw, var(--t-6xl));
                        --t-3xl-track: -0.03em;   /* step + hero titles */
  --t-4xl: clamp(var(--t-2xl), 5vw, var(--t-6xl));
                        --t-4xl-track: -0.03em;   /* the largest title */

  --w-regular: 400;
  --w-medium:  500;     /* the workhorse: nearly all UI text */
  --w-semi:    600;     /* story captions and pinned copy only */

  /* ---- Ink --------------------------------------------------
     One hue at five opacities. Anything that needs a sixth is a
     sign the hierarchy is too fine, not that the ladder is short. */
  --ink:        #171512;
  --ink-70:     rgba(23, 21, 18, 0.70);   /* secondary copy */
  --ink-45:     rgba(23, 21, 18, 0.45);   /* muted labels, weekdays */
  --ink-30:     rgba(23, 21, 18, 0.30);   /* placeholder, disabled */
  --ink-15:     rgba(23, 21, 18, 0.15);   /* separators on dark fills */

  /* ---- Surfaces ---------------------------------------------
     Tints laid over the page, kept apart from text ink so a fill
     and a label are never the same token. */
  --fill-0:     rgba(23, 21, 18, 0.02);   /* the quietest panel: price component, Done panels */
  --fill-1:     rgba(23, 21, 18, 0.04);   /* fields, cards, panels */
  --fill-2:     rgba(23, 21, 18, 0.06);   /* chips, tags */
  --fill-3:     rgba(23, 21, 18, 0.10);   /* hover on the above */
  --fill-4:     rgba(23, 21, 18, 0.12);   /* scrim over the mobile price bar */
  --line:       rgba(23, 21, 18, 0.08);   /* outlined controls */
  --hairline:   rgba(23, 21, 18, 0.04);   /* row separators */

  /* ---- Brand ------------------------------------------------ */
  --accent:     #1C1C1C;                  /* primary CTA fill */
  --accent-hover: #000000;
  --secondary:  #E0E0E0;                  /* secondary CTA fill */
  --secondary-hover: #D6D6D6;
  --accent-tint: rgba(28, 28, 28, 0.10);  /* the accent as a wash: date range band */
  --paper:      #ffffff;

  /* ---- Status ------------------------------------------------
     One red, for validation and failed submits. Anything needing a
     second status colour should be a new token here, never a literal. */
  --status-error: #B4402F;

  --page:       #0E0D0B;                  /* the dark page behind the story */
  --veil:       rgba(14, 13, 11, 0.28);   /* the loading veil over --page */

  /* chrome surfaces: nav, booking panel, help panel */
  --chrome:      rgba(250, 250, 250, 0.68);
  --chrome-hover: rgba(250, 250, 250, 0.85);
  --chrome-blur: 16px;
  --chrome-inset: 8px;                    /* nav + modal margin from the viewport */

  /* ---- Tints on chrome ---------------------------------------
     The dark --fill-* ladder disappears against a frosted chrome
     surface, so rows sitting on one lighten instead. Three steps,
     mirroring the dark ladder: rest, hover, active. */
  --tint-1:  rgba(255, 255, 255, 0.01);   /* modal backdrops */
  --tint-2:  rgba(255, 255, 255, 0.45);   /* hover on chrome */
  --tint-3:  rgba(255, 255, 255, 0.70);   /* active / selected on chrome */

  /* ---- Spacing — 4pt grid ----------------------------------- */
  --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-14: 56px;
  --s-18: 72px;
  --s-24: 96px;

  /* ---- Radius ----------------------------------------------- */
  --r-sm:   2px;    /* rows nested inside a rounded shell */
  --r-md:   4px;    /* panels, fields, cards — the default */
  --r-lg:   12px;   /* floating bars and sheets */
  --r-pill: 999px;  /* chips, CTAs, circles — fully round at any height */

  /* ---- Component sizes --------------------------------------
     Three sizes per primitive. The unmarked class IS medium, so
     existing markup keeps its size; --sm and --lg are additive.
     Heights sit on the 4pt grid and pair with a type step. */
  --ctl-h-sm:   40px;   --ctl-px-sm:  16px;   /* dense rows, toolbars */
  --ctl-h-md:   48px;   --ctl-px-md:  20px;   /* the default */
  --ctl-h-lg:   56px;   --ctl-px-lg:  32px;   /* primary moments */

  --field-h-sm: 44px;   --field-py-sm: 12px;
  --field-h-md: 52px;   --field-py-md: 20px;
  --field-h-lg: 72px;   --field-py-lg: 24px;
  /* --field-h-* are min-height FLOORS, not rendered heights: an <input>'s
     content box is clamped to the font's normal line box (~1.21em), which
     Chrome uses in place of a smaller declared line-height. Rendered:
     44 / 60 / 72. Size a field with the modifier class, not the raw token. */

  /* ---- Motion ------------------------------------------------
     Two curves: `ease-out` for things arriving, `ease-in-out` for
     things resizing in place. */
  --e-out:    cubic-bezier(.22, 1, .36, 1);
  --e-move:   cubic-bezier(.4, 0, .1, 1);
  --d-fast:   160ms;
  --d-base:   320ms;
  --d-slow:   620ms;
}