/* GENERATED from design/tokens.css by design/syncDesign.mjs --write. Do not edit here. */
/* 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's call, 2026-10-04: Inter Thin). Every app's heading rule reads these. */
  --card-title-size: 16px;
  --card-title-weight: 100;
  --card-box-gap: 27px;
  --card-cap-gap: 4px;
  --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;
  --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);
  /* 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);
  --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; }
}