/* GENERATED — do not edit.
 * npx tsx scripts/lab/emit-app-tokens.ts   (in the fitnitios repo)
 *
 * The real values the Fitnit iOS app renders from: src/theme/tokens.ts and
 * src/theme/ThemeContext.tsx. Lab mocks use these so an "after" pane is drawn
 * with shapes and colours that actually exist, and re-drawn when they change.
 *
 * Generated 2026-09-07.
 */

:root {
  /* radius — OBSERVED from UIKit's own controls, not published by Apple. */
  --app-radius-xs: 6px;
  --app-radius-sm: 8px;
  --app-radius-card: 10px;
  --app-radius-sheet: 14px;
  --app-radius-hero: 20px;
  --app-radius-full: 999px;

  /* spacing — UIKit's 8pt grid; `screen` is the compact-width layout margin. */
  --app-space-xs: 4px;
  --app-space-sm: 8px;
  --app-space-md: 12px;
  --app-space-lg: 16px;
  --app-space-xl: 24px;
  --app-space-xxl: 32px;
  --app-space-screen: 16px;
  --app-space-rowInset: 16px;

  /* the one surface every full-width card in a content column shares */
  --app-card-radius: var(--app-radius-sheet);
  --app-card-padding: var(--app-space-lg);
  --app-card-gap: var(--app-space-md);

  /* an inset-grouped list row. 56, not 44 — 44 is the HIG floor, not a target. */
  --app-row-min-height: 56px;
  --app-row-tile: 34px;
  --app-row-glyph: 19px;
  --app-row-padding-horizontal: var(--app-space-lg);
  --app-row-gap: var(--app-space-md);

  /* type — Apple's eleven Dynamic Type styles at the default content size */
  --app-type-largeTitle: 400 34px/41px -apple-system, "SF Pro Text", BlinkMacSystemFont, sans-serif;
  --app-type-title1: 400 28px/34px -apple-system, "SF Pro Text", BlinkMacSystemFont, sans-serif;
  --app-type-title2: 400 22px/28px -apple-system, "SF Pro Text", BlinkMacSystemFont, sans-serif;
  --app-type-title3: 400 20px/25px -apple-system, "SF Pro Text", BlinkMacSystemFont, sans-serif;
  --app-type-headline: 600 17px/22px -apple-system, "SF Pro Text", BlinkMacSystemFont, sans-serif;
  --app-type-body: 400 17px/22px -apple-system, "SF Pro Text", BlinkMacSystemFont, sans-serif;
  --app-type-callout: 400 16px/21px -apple-system, "SF Pro Text", BlinkMacSystemFont, sans-serif;
  --app-type-subheadline: 400 15px/20px -apple-system, "SF Pro Text", BlinkMacSystemFont, sans-serif;
  --app-type-footnote: 400 13px/18px -apple-system, "SF Pro Text", BlinkMacSystemFont, sans-serif;
  --app-type-caption1: 400 12px/16px -apple-system, "SF Pro Text", BlinkMacSystemFont, sans-serif;
  --app-type-caption2: 400 11px/13px -apple-system, "SF Pro Text", BlinkMacSystemFont, sans-serif;

  /* liquid-glass legibility tint. Not decoration — an untinted pane takes the
     photo's luminance while an RN <Text> keeps its own, measured at 1.03:1. */
  --app-glass-tint-light: rgba(255,255,255,0.7);
  --app-glass-tint-dark: rgba(20,20,20,0.85);

  /* colours — light */
  --app-background: #ffffff;
  --app-background-secondary: #f5f5f5;
  --app-card: #ffffff;
  --app-card-secondary: #f0f0f0;
  --app-text: #1a1a1a;
  --app-text-secondary: #6b7280;
  --app-text-muted: #9ca3af;
  --app-primary: #49DE80;
  --app-primary-muted: rgba(16, 185, 129, 0.15);
  --app-success: #49DE80;
  --app-warning: #f59e0b;
  --app-error: #ef4444;
  --app-border: #e5e5e5;
  --app-border-light: #f0f0f0;
  --app-header-background: #ffffff;
  --app-header-tint: #1a1a1a;
  --app-tab-bar-background: #ffffff;
  --app-tab-bar-border: #e5e5e5;
  --app-tab-bar-inactive: #9ca3af;
}

/* Dark is the app's own dark theme, not a filter over the light one. Elevation
   is carried by surface lightness because iOS draws no shadow in dark mode. */
.app-dark,
[data-app-theme="dark"] {
  --app-background: #0a0a0a;
  --app-background-secondary: #111111;
  --app-card: #1a1a1a;
  --app-card-secondary: #2a2a2a;
  --app-text: #ffffff;
  --app-text-secondary: #9ca3af;
  --app-text-muted: #6b7280;
  --app-primary: #49DE80;
  --app-primary-muted: rgba(16, 185, 129, 0.15);
  --app-success: #49DE80;
  --app-warning: #f59e0b;
  --app-error: #ef4444;
  --app-border: #2a2a2a;
  --app-border-light: #1a1a1a;
  --app-header-background: #0a0a0a;
  --app-header-tint: #ffffff;
  --app-tab-bar-background: #0a0a0a;
  --app-tab-bar-border: #1a1a1a;
  --app-tab-bar-inactive: #6b7280;
}

/* ------------------------------------------------------------------ mocks */

/* A phone-shaped ground for an "after" pane. Squircle corners everywhere: a
   plain border-radius is a circular arc and meets the edge at a seam. */
.app {
  background: var(--app-background);
  color: var(--app-text);
  font: var(--app-type-body);
  padding: var(--app-space-screen);
  border-radius: var(--app-radius-hero);
  border: 1px solid var(--app-border);
}
.app-card {
  background: var(--app-card);
  border-radius: var(--app-card-radius);
  padding: var(--app-card-padding);
  margin-bottom: var(--app-card-gap);
}
.app-card:last-child { margin-bottom: 0; }
.app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--app-card-gap);
}
.app-grid .app-card { margin-bottom: 0; }
.app-wide { grid-column: span 2; }
.app-row {
  display: flex;
  align-items: center;
  gap: var(--app-row-gap);
  min-height: var(--app-row-min-height);
  padding: 0 var(--app-row-padding-horizontal);
}
.app-row-tile {
  flex: none;
  width: var(--app-row-tile);
  height: var(--app-row-tile);
  font-size: var(--app-row-glyph);
  display: grid;
  place-items: center;
  /* concentric with the row's inset, not a picked number */
  border-radius: calc(var(--app-card-radius) - var(--app-space-xs));
  background: var(--app-card-secondary);
}
.app-t-largetitle { font: var(--app-type-largeTitle); letter-spacing: -.02em; }
.app-t-title3     { font: var(--app-type-title3); }
.app-t-headline   { font: var(--app-type-headline); }
.app-t-body       { font: var(--app-type-body); }
.app-t-subhead    { font: var(--app-type-subheadline); color: var(--app-text-secondary); }
.app-t-footnote   { font: var(--app-type-footnote); color: var(--app-text-secondary); }
.app-t-caption1   { font: var(--app-type-caption1); color: var(--app-text-muted); }
.app-t-caption2   { font: var(--app-type-caption2); color: var(--app-text-muted); }
.app-pill {
  border-radius: var(--app-radius-full);
  padding: var(--app-space-sm) var(--app-space-lg);
  background: var(--app-primary);
  color: #0d0d0d;
  font: var(--app-type-headline);
  text-align: center;
}
.app-pill-secondary { background: var(--app-card-secondary); color: var(--app-text); }
.app-bar { height: 4px; border-radius: 2px; background: var(--app-card-secondary); overflow: hidden; }
.app-bar > i { display: block; height: 100%; background: var(--app-primary); border-radius: 2px; }