/* GENERATED from design/tokens.css by design/syncDesign.mjs --write. Do not edit here. */
/* Site only: the light block is a prefers-color-scheme query, the public page runs no script (site/_headers). */
/* SHARED DESIGN TOKENS: the one source for every Varun app: colour, radius, nav height, the card's
   geometry and the type tiers.
   Edit here, run `node design/syncDesign.mjs --write`, deploy each app.
   Muscle and Snap load the generated copy (app/designTokens.css) and may not
   redeclare these names. Wad deploys from its own folder and cannot import it,
   so its stylesheet repeats them and `node design/syncDesign.mjs` fails if it
   disagrees. Rules and rationale: design/README.md, design/bottomNavBar.md. */
:root {
  color-scheme: dark;
  --bg-rgb: 28,28,30;
  --ink-rgb: 242,242,247;
  --bg: rgb(var(--bg-rgb));
  --surface: #2C2C2E;
  --surface-2: #3A3A3C;
  --surface-3: #48484A;
  --ink: rgb(var(--ink-rgb));
  --muted: #AEAEB2;
  --line: rgba(var(--ink-rgb), .18);
  --accent: var(--ink);
  --on-accent: var(--bg);
  --track: #242426;
  /* The neutral a coloured fill is washed toward (Wad's category rings do it at 30%: wad/DESIGN.md §5). Pale in both themes. */
  --bar-mid: #E5E5EA;
  --surface-border: rgba(var(--ink-rgb), .08);
  --card-shadow: 0 1px 1px rgba(0,0,0,.18), 0 10px 28px rgba(0,0,0,.12);
  /* The card's DNA (design/cardsAndInfographics.md): up to three boxes in this
     order (heading row, hero unit, graphic unit) and every distance between and inside
     them. A card never declares a spacing number of its own. */
  --card-title-inset: 24px;
  --card-gap: 9px;
  --card-height: 216px;
  --card-double-height: 432px;
  --card-head-h: 20px;
  /* The card heading's type: ONE place (owner, 2026-10-25: "the lightest possible Kanit for the card headings", over Inter Thin of 2026-10-04; Thin 100 was then judged a little too light, so the next one up, ExtraLight 200). Every app's heading rule reads these three. Kanit's
     weights run 100 Thin, 200 ExtraLight, 300 Light: every app loads Kanit 200 (Muscle and Snap host it, Wad and Dev ask Google for it). The widgets cannot (iOS has no Kanit): they draw their title in SF Pro Thin, as their heroes are SF Pro Bold. */
  --card-title-font: 'Kanit', system-ui, sans-serif;
  --card-title-size: 16px;
  --card-title-weight: 200;
  --card-box-gap: 27px;
  --card-cap-gap: 7px;          /* hero number -> its caption: 7px (it was 4; fine-tuned on the Steps Today card, owner 2026-10-22, then made the rule for every hero: 11px between the digits' feet and the caption's cap tops) */
  --card-detail-gap: 9px;
  --card-foot-gap: 14px;
  /* Type tiers: a card is on ONE tier all the way down. Quiet is 75% of main. */
  --hero-size: 30px;
  /* THE HERO'S TYPE, one for every app (owner, 2026-10-22: "Inter, bolder, a standard across apps"; chosen from five mock-ups, weights 800 to 400, so 700): a card's hero number is Inter 700, tracked a hair tight, with evenly spaced digits (design/typography.md rule 11). Every app's hero rule reads these. */
  /* NUMBERS ON A RING (owner, 2026-10-22, fine-tuned on Muscle's Steps Today ring, design/ringsAndBands.md): the numbers a ring carries beside its hero, the line that marks a threshold and the figure of a second goal, are Detail 1 at 1.25x, Inter 300, full ink; the target written under the hero is one step ahead, 1.4x at 400. */
  --ring-num-size: 10px;
  --ring-target-size: 10px;
  --ring-target-tracking: .06em;
  --ring-num-weight: 300;
  --ring-num-tracking: 0;
  --ring-target-weight: 400;
  --ring-lead-size: 12px;
  /* THE TOP GLASS, one material (owner, 2026-10-23: the ledger header is the top row's glass): the wash and blur of the caps and the page pill in the top row, and the hairline rim every glass shape carries. The top bar, the bottom pill's rim and the ledger headers all read these. */
  --top-glass-fill: rgba(var(--bg-rgb), .05);
  --top-glass-filter: blur(8px) saturate(160%);
  --glass-rim: linear-gradient(170deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .07) 38%, rgba(255, 255, 255, .04) 62%, rgba(255, 255, 255, .3));
  /* LIQUID GLASS (owner, 2026-10-23; design/liquidGlass.md): Apple's material is a lens, not a frost. iOS WebKit cannot refract (an SVG filter inside backdrop-filter is Chromium-only), so the lens is drawn: a light blur with strong saturation and a lift in brightness, a diagonal sheen,
     a bright specular edge at the top left and a softer one at the bottom right, and a glow just inside the rim where the glass is thick. One material for every surface that is a floating control; the bottom pill is the first. */
  --lg-filter: blur(3px) saturate(180%) brightness(1.05);
  --lg-fill: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 40%), rgba(var(--bg-rgb), .06);
  --lg-spec: inset .75px .75px .5px -.25px rgba(255, 255, 255, .42), inset -.75px -.75px .5px -.25px rgba(255, 255, 255, .28), inset 0 -9px 0 -8px rgba(255, 255, 255, .14), inset 0 0 12px rgba(255, 255, 255, .04);          /* the glass's inner light: specular rim, crescent, inner glow */
  --lg-float: 0 8px 24px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .1);          /* the float shadow: the bottom pill has it, the top row does not */
  --lg-edge: var(--lg-spec), var(--lg-float);
  --lg-lens-fill: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .22));
  --lg-lens-spec: inset .75px .75px .5px -.25px rgba(255, 255, 255, .26), inset -.75px -.75px .5px -.25px rgba(255, 255, 255, .16);
  --lg-lens-float: 0 1px 3px rgba(0, 0, 0, .1);
  --lg-lens-edge: var(--lg-lens-spec), var(--lg-lens-float);
  --ledger-line-w: 0.75px;          /* THE LEDGER LINE, one rule for every ledger (owner, 2026-10-23): the header cell and the data cell draw the SAME box, all four sides, this thick (the old header was 1.5px at .75 ink, the data cell .25px at .5 ink) and at this share of ink; ledger cards, expanded ledger pages, Wad's transaction ledger and Snap's scan sheet all read it */
  --ledger-line-a: 0.5;
  --ledger-head-line-k: 1.6;          /* the header cell's line is the data cell's line x this (owner, 2026-10-23: 1.25 read the same as a cell and 2 was too much, so 1.6: 1.2px against 0.75px) */
  --ledger-head-line: calc(var(--ledger-line-w) * var(--ledger-head-line-k));
  --ledger-head-size: 18px;          /* THE LEDGER TYPE (owner, 2026-10-23): a column name is told apart from its cells by size and tracking, never by weight (a ledger is Kanit 300 throughout): bigger and more open than a cell */
  --ledger-head-tracking: .06em;
  --ledger-head-radius: 0;          /* a header cell is a square box in every ledger, card or page (owner, 2026-10-23); a data cell keeps its 3.75px corner */
  --ledger-cell-size: 16px;
  --ledger-cell-tracking: 0;
  --chip-size: 12px;
  --chip-tracking: .06em;
  --card-sub-size: 14px;
  --card-sub-weight: 400;
  /* THE TEXT SCALE for everything that is not a card's hero, a ring number or a ledger cell: pages, dialogs, forms, menus, chips (owner, 2026-10-22: shared roles for page, dialog and form text; design/typography.md). A text takes one of these and never types a size. */
  --type-tag: 10px;          /* tiny tags and badges */
  --type-caption: 11px;      /* a caption under a thing, a small count */
  --type-label: 12px;        /* a label, a chip, helper text */
  --type-small: 13px;        /* small body: a hint, a row's second line */
  --type-body: 14px;         /* body text, a row's first line, a button */
  --type-lead: 16px;         /* a field's text (never under 16px on touch), a lead line */
  --type-heading: 18px;      /* a dialog or sheet heading */
  --info-size: var(--type-label);
  --type-display: 22px;      /* a page-level title */
  --ring-goal-opacity: .85;
  --font-ui: 'Kanit', system-ui, -apple-system, 'Segoe UI', sans-serif;          /* the one typeface (design/typography.md rule 1, "Kanit only", owner 2026-10-25): what a text asks for when it is not the hero */
  --hero-font: 'Kanit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hero-weight: 600;
  --hero-tracking: -.01em;
  --hero-decimals-size: 12px;
  --hero-cap-size: 11px;
  --hero-size-quiet: calc(var(--hero-size) * 0.75);
  --hero-decimals-size-quiet: calc(var(--hero-decimals-size) * 0.75);
  --hero-cap-size-quiet: calc(var(--hero-cap-size) * 0.75);
  --stat-label-size: 11px;
  --stat-value-size: 14px;
  --stat-decimals-size: 10px;
  --stat-label-size-quiet: calc(var(--stat-label-size) * 0.75);
  --stat-decimals-size-quiet: calc(var(--stat-decimals-size) * 0.75);
  /* Bars, a ring's band and the lines drawn on a graphic. A bar and a ring's stroke are one thickness (--t-bar); a reference
     tick or a callout line is --mark-line, half a pixel; a chart's centre axis is --axis-line (the tick is 75% of it). Never
     type a line width by hand. */
  --bar-height: 21px;
  --bar-height-quiet: calc(var(--bar-height) * 0.75);
  --mark-line: 0.5px;
  --axis-line: calc(var(--mark-line) / 0.75);
  /* A bar's pills: the gap between two segments and the corner of each (Wad's .nw-bars: 3px, 14px). A data line (a running total, a trend)
     is --series-line wide (Dev's sparkline was already 2px); a secondary line beside the main one is 75% of it. Never type any of these by hand. */
  --bar-gap: 3px;
  --bar-radius: 14px;
  --series-line: 2px;
  /* The tier switch: parts read these, and class tier-quiet on a card re-points them. */
  --t-hero: var(--hero-size);
  --t-hero-dec: var(--hero-decimals-size);
  --t-cap: var(--hero-cap-size);
  --t-d1: var(--stat-label-size);
  --t-d2: var(--stat-decimals-size);
  --t-bar: var(--bar-height);
  --ring-corner: calc(7px * var(--ring-band-k));          /* a donut slice's end corner, and the corner of a thick bar drawn beside donuts (Wad's Today bar): flat ends softened, never a half-circle (JS: RING.CORNER_PX) */
  --ring-gap: 3px;          /* the gap between two slices (JS: RING.GAP_PX) */
  --ring-band-k: 1.25;          /* a donut's band is this many times a bar's thickness, calc(var(--t-bar) * var(--ring-band-k)) at the ring itself so a quiet card's bar scales it (owner, 2026-10-19, Muscle Steps and Macros; Wad's donuts 2026-10-21). Gap (3px) and corners (7px) stay. */
  --radius: 27px;
  --focus: #0A84FF;
  --bottom-nav-h: 64px;
  --bottom-nav-safe-h: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg-rgb: 242,242,247;
    --ink-rgb: 28,28,30;
    --surface: #FCFCFD;
    --surface-2: #E5E5EA;
    --surface-3: #D1D1D6;
    --muted: #6C6C70;
    --track: #E5E5EA;
    --bar-mid: #C7C7CC;
    --surface-border: rgba(var(--ink-rgb), .07);
    --card-shadow: 0 1px 2px rgba(28,28,30,.04), 0 10px 24px rgba(28,28,30,.05);
    --on-accent: #F2F2F7;
    --focus: #007AFF;
  }
}

/* THE TIER SWITCH. Class tier-quiet on a card re-points every tier token at its quiet (75%) size, so
   moving a card between tiers is one class and changing a size is one base token. It is written
   AFTER the light block on purpose: the design check reads everything below that block as the
   second set, and Wad's own copy of this rule sits below its light block too. */
.tier-quiet {
  --t-hero: var(--hero-size-quiet);
  --t-hero-dec: var(--hero-decimals-size-quiet);
  --t-cap: var(--hero-cap-size-quiet);
  --t-d1: var(--stat-label-size-quiet);
  --t-d2: var(--stat-decimals-size-quiet);
  --t-bar: var(--bar-height-quiet);
}

/* Form fields are never smaller than 16px on a touch screen. iOS zooms the page when a field under 16px takes focus,
   and in an installed PWA it keeps the zoom after the field or its dialog closes. !important because dialogs and
   inline styles set their own sizes. (design/typography.md rule 8) */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), textarea, select { font-size: 16px !important; }
}