/* ==========================================================================
   Base — design tokens

   GENERATED FILE. DO NOT EDIT.

     source:     src/theme/tokens.ts
     generator:  scripts/build-web-tokens.mjs
     regenerate: npm run assets:tokens
     verify:     npm run verify:tokens   (fails the build if this file is stale)

   Every value below is the value the native app renders with. The app and the
   site are not "matched" here, in the sense of two things kept in step by hand
   — they are the same numbers, compiled twice. Change a colour in src/theme/tokens.ts
   and it lands on iOS, Android and the web together.

   The naming maps one-to-one onto the app's own token names, so a screen
   reaching for `c.surfaceAlt` and a stylesheet reaching for
   `var(--c-surface-alt)` are visibly the same thing.

     --c-*         palette (theme-dependent: light in :root, dark below)
     --btn-*       the two faces of a button, per tone (theme-dependent)
     --brand-*     the accent ramp, derived from --c-accent
     --r-* --s-*   radius and spacing scale
     --l-*         layout constants (page margin, row height, press travel)
     --t-*         type scale, as a `font:` shorthand plus its parts

   Everything else — macro, energy, semantic, activity, sport, hr-zone,
   insight, health, micro, shortcut, splash — is theme-INVARIANT identity
   colour: the hex IS the thing's name, in both themes, on every platform.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /*
   * The app bundles no font. `FONT_SYSTEM = 'System'` in src/theme/tokens.ts
   * resolves to SF Pro on iOS and Roboto on Android, with the weight carried as
   * a separate axis. This stack is that same instruction for a browser — which
   * is why body copy on this site and body copy in the app are the same face on
   * the same device, rather than two faces chosen to look alike.
   */
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /*
   * The display face. The app has no equivalent — no app screen carries a 66px
   * headline — so this is the one type decision the site makes on its own, and
   * it is scoped to marketing headlines only (.d1/.d2/.d3, article h2/h3).
   */
  --font-display: 'Archivo', var(--font-ui);

  /*
   * Bricolage, for the wordmark and nothing else. The "b." mark is Bricolage
   * 700 converted to outlines (assets/images/logo.svg), so the wordmark beside
   * it has to be the same face or the two stop being one lockup.
   */
  --font-brand: 'Bricolage Grotesque', 'Archivo', var(--font-ui);

  /* System mono, to pair with the system UI face rather than fight it. */
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------------------------------------------------------- palette --- */
  --c-bg: #FFFFFF;
  --c-surface: #FFFFFF;
  --c-surface-alt: #F2F2F7;
  --c-surface-high: #E5E5EA;
  --c-ink: #0A0A0B;
  --c-ink-muted: #7C7C85;
  --c-ink-faint: #B8B8C0;
  --c-hairline: #E3E3E9;
  --c-ring-track: #EDEDF2;
  --c-ring-fill: #2E6BFF;
  --c-ring-surplus: #4CC97F;
  --c-on-ink: #FFFFFF;
  --c-bar-track: #EDEDF2;
  --c-chrome: #FFFFFF;
  --c-sheet: #FFFFFF;
  --c-sheet-handle: #D1D1D6;
  --c-pill-thumb: #0A0A0B;
  --c-on-pill: #FFFFFF;
  --c-accent: #2E6BFF;
  --c-accent-soft: #E8EFFF;

  /* ------------------------------------------------- button two-faces --- */
  --btn-ink-face: #1C1C1F;
  --btn-ink-edge: #000000;
  --btn-ink-ink: #FFFFFF;
  --btn-accent-face: #2E6BFF;
  --btn-accent-edge: #1B47B5;
  --btn-accent-ink: #FFFFFF;
  --btn-success-face: #3FB981;
  --btn-success-edge: #25835A;
  --btn-success-ink: #FFFFFF;
  --btn-danger-face: #E5544B;
  --btn-danger-edge: #A62F28;
  --btn-danger-ink: #FFFFFF;
  --btn-pr-face: #F0A500;
  --btn-pr-edge: #A86F00;
  --btn-pr-ink: #241800;
  --btn-quiet-face: var(--c-surface-alt);
  --btn-quiet-edge: var(--c-surface-high);
  --btn-quiet-ink: var(--c-ink);

  /* -------------------------------------- accent ramp, derived from it --- */
  --brand: var(--c-accent);
  --brand-50: #F2F6FF;
  --brand-100: #E4ECFF;
  --brand-200: #C9D9FF;
  --brand-300: #A1BCFF;
  --brand-400: #719AFF;
  --brand-500: #2E6BFF;
  --brand-600: #285BD8;
  --brand-700: #224AAC;
  --brand-800: #1A3576;

  /* -------------------------------------------------- radius / spacing --- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 24px;
  --s-xxl: 32px;
  --s-xxxl: 48px;
  --l-page: 16px;
  --l-pill: 40px;
  --l-row: 52px;
  --l-card: 16px;
  --l-search-bar: 48px;
  --l-hairline: 0.5px;
  --l-press: 4px;
  --l-session-log: 72px;
  --l-cta: 56px;
  --l-session-ring: 64px;
  --l-session-step: 48px;
  --l-tab-scroll: 120px;
  --l-push-scroll: 96px;
  --l-section: 28px;
  --l-section-gap: 12px;

  /* -------------------------------------------------------------- type --- */
  --t-hero: 700 52px/56px var(--font-ui);
  --t-hero-size: 52px;
  --t-hero-weight: 700;
  --t-hero-line: 56px;
  --t-display: 700 30px/36px var(--font-ui);
  --t-display-size: 30px;
  --t-display-weight: 700;
  --t-display-line: 36px;
  --t-number-lg: 700 36px/40px var(--font-ui);
  --t-number-lg-size: 36px;
  --t-number-lg-weight: 700;
  --t-number-lg-line: 40px;
  --t-title: 700 32px/39px var(--font-ui);
  --t-title-size: 32px;
  --t-title-weight: 700;
  --t-title-line: 39px;
  --t-stat: 600 24px/30px var(--font-ui);
  --t-stat-size: 24px;
  --t-stat-weight: 600;
  --t-stat-line: 30px;
  --t-section: 600 18px/23px var(--font-ui);
  --t-section-size: 18px;
  --t-section-weight: 600;
  --t-section-line: 23px;
  --t-title-sm: 600 22px/28px var(--font-ui);
  --t-title-sm-size: 22px;
  --t-title-sm-weight: 600;
  --t-title-sm-line: 28px;
  --t-stat-value: 600 19px/24px var(--font-ui);
  --t-stat-value-size: 19px;
  --t-stat-value-weight: 600;
  --t-stat-value-line: 24px;
  --t-nav-title: 600 17px/22px var(--font-ui);
  --t-nav-title-size: 17px;
  --t-nav-title-weight: 600;
  --t-nav-title-line: 22px;
  --t-card-title: 600 15px/20px var(--font-ui);
  --t-card-title-size: 15px;
  --t-card-title-weight: 600;
  --t-card-title-line: 20px;
  --t-body: 400 17px/22px var(--font-ui);
  --t-body-size: 17px;
  --t-body-weight: 400;
  --t-body-line: 22px;
  --t-body-med: 500 17px/22px var(--font-ui);
  --t-body-med-size: 17px;
  --t-body-med-weight: 500;
  --t-body-med-line: 22px;
  --t-body-strong: 600 17px/22px var(--font-ui);
  --t-body-strong-size: 17px;
  --t-body-strong-weight: 600;
  --t-body-strong-line: 22px;
  --t-control: 500 15px/20px var(--font-ui);
  --t-control-size: 15px;
  --t-control-weight: 500;
  --t-control-line: 20px;
  --t-label: 500 13px/18px var(--font-ui);
  --t-label-size: 13px;
  --t-label-weight: 500;
  --t-label-line: 18px;
  --t-label-strong: 600 13px/18px var(--font-ui);
  --t-label-strong-size: 13px;
  --t-label-strong-weight: 600;
  --t-label-strong-line: 18px;
  --t-meta: 400 13px/18px var(--font-ui);
  --t-meta-size: 13px;
  --t-meta-weight: 400;
  --t-meta-line: 18px;
  --t-num-meta: 400 13px/18px var(--font-ui);
  --t-num-meta-size: 13px;
  --t-num-meta-weight: 400;
  --t-num-meta-line: 18px;
  --t-tiny: 500 11px/14px var(--font-ui);
  --t-tiny-size: 11px;
  --t-tiny-weight: 500;
  --t-tiny-line: 14px;
  --t-caps: 600 11px/14px var(--font-ui);
  --t-caps-size: 11px;
  --t-caps-weight: 600;
  --t-caps-line: 14px;
  --t-caps-track: 0.6px;

  /* -------------------------------- identity colour (theme-invariant) --- */
  --macro-calories: #4C8DFF;
  --macro-protein: #FF6B5A;
  --macro-fat: #FFC93C;
  --macro-carbs: #4CC97F;
  --macro-calories-tint: rgba(76,141,255,0.18);
  --macro-protein-tint: rgba(255,107,90,0.18);
  --macro-fat-tint: rgba(255,201,60,0.18);
  --macro-carbs-tint: rgba(76,201,127,0.18);
  --energy-metabolic: #4C8DFF;
  --energy-walk: #3DB8A0;
  --energy-exercise: #5B8DEF;
  --energy-surplus: #4CC97F;
  --energy-overflow: #FFC93C;
  --energy-projected: #8E9099;
  --energy-activity-1: #4C8DFF;
  --energy-activity-2: #FF6B5A;
  --energy-activity-3: #FFC93C;
  --energy-activity-4: #3DB8A0;
  --energy-activity-5: #7B6CFF;
  --semantic-pr: #FFB703;
  --semantic-good: #4CAF7D;
  --semantic-warn: #F5C242;
  --semantic-bad: #E5544B;
  --semantic-neutral: #C7C7CC;
  --semantic-good-tint: rgba(76, 175, 125, 0.20);
  --semantic-pr-tint: rgba(255, 183, 3, 0.20);
  --activity-move: #FA114F;
  --activity-exercise: #92E82A;
  --activity-stand: #00D6E0;
  --activity-duration: #FFD60A;
  --activity-distance: #00C7FF;
  --activity-energy: #FF375F;
  --activity-elevation: #92E82A;
  --activity-power: #92E82A;
  --activity-cadence: #00D6E0;
  --activity-pace: #00D6E0;
  --activity-speed: #00D6E0;
  --activity-heart: #FF3B30;
  --activity-effort: #5E5CE6;
  --activity-strokes: #00C7FF;
  --activity-steps: #00D6E0;
  --sport-run: #92E82A;
  --sport-ride: #FFD60A;
  --sport-swim: #00C7FF;
  --sport-walk: #00D6E0;
  --sport-strength: #FF375F;
  --sport-other: #AF74F2;
  --hr-zone-1: #5AC8FA;
  --hr-zone-2: #00D6E0;
  --hr-zone-3: #92E82A;
  --hr-zone-4: #FFD60A;
  --hr-zone-5: #FF3B30;
  --insight-expenditure: #FF7A5C;
  --insight-expenditure-band: rgba(255, 122, 92, 0.28);
  --insight-weight: #A78BFA;
  --health-sleep: #7B8CDE;
  --health-recovery: #E07A6A;
  --health-energy: #5B8DEF;
  --health-steps: #5B9A86;
  --health-heart: #FF3B30;
  --micro-build: #8E7CFF;
  --micro-baseline: #6E8CA0;
  --shortcut-search: #F5C33B;
  --shortcut-barcode: #B07BC9;
  --shortcut-recipes: #4CC97F;
  --shortcut-templates: #4C8DFF;
  --shortcut-on-tile: #000000;
  --splash-bg: #0B1B3F;
  --splash-tile: #FFFFFF;
  --splash-ink: #0A0A0B;
  --splash-dot: #2E6BFF;
}

/*
 * Dark.
 *
 * Only the theme-DEPENDENT tokens are restated: the palette, the button faces
 * and the accent ramp. Identity colour, spacing, radii and the type scale are
 * the same numbers in both themes in the app, so restating them here would be
 * three hundred lines that can only ever introduce a discrepancy.
 *
 * `[data-theme]` wins over the media query so a page can pin itself, which is
 * what the device frames need: an iframe of the app in light mode, inside a
 * page the OS has put in dark mode, should still be a light phone.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --c-bg: #000000;
    --c-surface: #121214;
    --c-surface-alt: #1F1F23;
    --c-surface-high: #2C2C31;
    --c-ink: #FFFFFF;
    --c-ink-muted: #9A9AA2;
    --c-ink-faint: #5E5E66;
    --c-hairline: #2A2A30;
    --c-ring-track: #2A2A30;
    --c-ring-fill: #4C8DFF;
    --c-ring-surplus: #4CC97F;
    --c-on-ink: #000000;
    --c-bar-track: #2A2A30;
    --c-chrome: #000000;
    --c-sheet: #121214;
    --c-sheet-handle: #48484A;
    --c-pill-thumb: #FFFFFF;
    --c-on-pill: #000000;
    --c-accent: #4C8DFF;
    --c-accent-soft: #16233D;

    --btn-ink-face: #FFFFFF;
    --btn-ink-edge: #A8A8B0;
    --btn-ink-ink: #000000;
    --btn-accent-face: #4C8DFF;
    --btn-accent-edge: #2B58B8;
    --btn-accent-ink: #FFFFFF;
    --btn-success-face: #4CC97F;
    --btn-success-edge: #2C8555;
    --btn-success-ink: #062A19;
    --btn-danger-face: #E5544B;
    --btn-danger-edge: #8E2A24;
    --btn-danger-ink: #FFFFFF;
    --btn-pr-face: #FFB703;
    --btn-pr-edge: #A87500;
    --btn-pr-ink: #241800;
    --btn-quiet-face: var(--c-surface-alt);
    --btn-quiet-edge: var(--c-surface-high);
    --btn-quiet-ink: var(--c-ink);

    --brand-50: #F4F8FF;
    --brand-100: #E8F0FF;
    --brand-200: #D0E1FF;
    --brand-300: #AECCFF;
    --brand-400: #85B1FF;
    --brand-500: #4C8DFF;
    --brand-600: #699FFF;
    --brand-700: #89B4FF;
    --brand-800: #B0CDFF;
  }
}

[data-theme='dark'] {
  --c-bg: #000000;
  --c-surface: #121214;
  --c-surface-alt: #1F1F23;
  --c-surface-high: #2C2C31;
  --c-ink: #FFFFFF;
  --c-ink-muted: #9A9AA2;
  --c-ink-faint: #5E5E66;
  --c-hairline: #2A2A30;
  --c-ring-track: #2A2A30;
  --c-ring-fill: #4C8DFF;
  --c-ring-surplus: #4CC97F;
  --c-on-ink: #000000;
  --c-bar-track: #2A2A30;
  --c-chrome: #000000;
  --c-sheet: #121214;
  --c-sheet-handle: #48484A;
  --c-pill-thumb: #FFFFFF;
  --c-on-pill: #000000;
  --c-accent: #4C8DFF;
  --c-accent-soft: #16233D;

  --btn-ink-face: #FFFFFF;
  --btn-ink-edge: #A8A8B0;
  --btn-ink-ink: #000000;
  --btn-accent-face: #4C8DFF;
  --btn-accent-edge: #2B58B8;
  --btn-accent-ink: #FFFFFF;
  --btn-success-face: #4CC97F;
  --btn-success-edge: #2C8555;
  --btn-success-ink: #062A19;
  --btn-danger-face: #E5544B;
  --btn-danger-edge: #8E2A24;
  --btn-danger-ink: #FFFFFF;
  --btn-pr-face: #FFB703;
  --btn-pr-edge: #A87500;
  --btn-pr-ink: #241800;
  --btn-quiet-face: var(--c-surface-alt);
  --btn-quiet-edge: var(--c-surface-high);
  --btn-quiet-ink: var(--c-ink);

  --brand-50: #F4F8FF;
  --brand-100: #E8F0FF;
  --brand-200: #D0E1FF;
  --brand-300: #AECCFF;
  --brand-400: #85B1FF;
  --brand-500: #4C8DFF;
  --brand-600: #699FFF;
  --brand-700: #89B4FF;
  --brand-800: #B0CDFF;
}

/*
 * The light palette, addressable the same way.
 *
 * Symmetric with the block above so a SUBTREE can pin either theme, not just
 * the root. The device frames need this: a drawn iPhone is showing an iframe of
 * the app pinned to `color-scheme: light`, so the status bar and home
 * indicator drawn over it have to be light too, whatever the page around them
 * is doing.
 */
[data-theme='light'] {
  --c-bg: #FFFFFF;
  --c-surface: #FFFFFF;
  --c-surface-alt: #F2F2F7;
  --c-surface-high: #E5E5EA;
  --c-ink: #0A0A0B;
  --c-ink-muted: #7C7C85;
  --c-ink-faint: #B8B8C0;
  --c-hairline: #E3E3E9;
  --c-ring-track: #EDEDF2;
  --c-ring-fill: #2E6BFF;
  --c-ring-surplus: #4CC97F;
  --c-on-ink: #FFFFFF;
  --c-bar-track: #EDEDF2;
  --c-chrome: #FFFFFF;
  --c-sheet: #FFFFFF;
  --c-sheet-handle: #D1D1D6;
  --c-pill-thumb: #0A0A0B;
  --c-on-pill: #FFFFFF;
  --c-accent: #2E6BFF;
  --c-accent-soft: #E8EFFF;

  --btn-ink-face: #1C1C1F;
  --btn-ink-edge: #000000;
  --btn-ink-ink: #FFFFFF;
  --btn-accent-face: #2E6BFF;
  --btn-accent-edge: #1B47B5;
  --btn-accent-ink: #FFFFFF;
  --btn-success-face: #3FB981;
  --btn-success-edge: #25835A;
  --btn-success-ink: #FFFFFF;
  --btn-danger-face: #E5544B;
  --btn-danger-edge: #A62F28;
  --btn-danger-ink: #FFFFFF;
  --btn-pr-face: #F0A500;
  --btn-pr-edge: #A86F00;
  --btn-pr-ink: #241800;
  --btn-quiet-face: var(--c-surface-alt);
  --btn-quiet-edge: var(--c-surface-high);
  --btn-quiet-ink: var(--c-ink);

  --brand-50: #F2F6FF;
  --brand-100: #E4ECFF;
  --brand-200: #C9D9FF;
  --brand-300: #A1BCFF;
  --brand-400: #719AFF;
  --brand-500: #2E6BFF;
  --brand-600: #285BD8;
  --brand-700: #224AAC;
  --brand-800: #1A3576;
}