:root {
  color-scheme: light; /* the app is light only, and so is this page */
  /* accent: brand blue (hue 212) snapped to Apple systemBlue (hue 211) */
  --accent: #007AFF;
  --accent-fill: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 40%, transparent);
  --on-accent: #FFFFFF;
  /* semantic */
  --red: #FF3B30; --green: #34C759; --orange: #FF9500;
  /* labels */
  --label: #000000;
  --label-2: rgba(60,60,67,0.60);
  --label-3: rgba(60,60,67,0.30);
  --placeholder: rgba(60,60,67,0.30);
  /* backgrounds */
  --bg: #FFFFFF; --bg-2: #F2F2F7; --bg-3: #FFFFFF;
  --bg-grouped: #F2F2F7;
  /* fills & separators */
  --fill: rgba(120,120,128,0.20);
  --fill-2: rgba(120,120,128,0.16);
  --fill-3: rgba(118,118,128,0.12);
  --separator: rgba(60,60,67,0.29);
  /* liquid glass */
  --glass-tint: rgba(255,255,255,0.42);
  --glass-tint-thin: rgba(255,255,255,0.30);
  --glass-tint-thick: rgba(255,255,255,0.60);
  --glass-blur: 12px; --glass-blur-thin: 8px; --glass-blur-thick: 18px;
  --glass-sat: 1.8;
  --glass-border: rgba(255,255,255,0.60);
  --glass-highlight: rgba(255,255,255,0.90);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.12);
  --lens-bezel: 14px; --lens-scale: 44; --lens-dispersion: 0.10;
  --scrim: rgba(0,0,0,0.20);
  /* shape */
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-full: 999px;
  /* spacing */
  --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-12: 48px; --s-16: 64px;
  /* motion */
  --motion-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms; --dur-std: 200ms; --dur-enter: 280ms;
  --dur-droplet: 400ms; --dur-bar: 240ms;
  /* page grid */
  --content-max: 1280px; --gutter: clamp(16px, 4vw, 48px);
  /* type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

  /* project: type scale */
  --type-display: clamp(34px, 4.4vw, 58px);
  --type-section: clamp(28px, 3.4vw, 44px);
  --type-title2: 22px; --type-title3: 20px;
  --type-headline: 17px; --type-body: 17px; --type-callout: 16px;
  --type-sub: 15px; --type-foot: 13px; --type-cap: 12px;
  --lh-title: 1.2; --lh-tight: 1.08; --lh-body: 1.35; --lh-reading: 1.5;
  --track-title: -0.02em; --track-cap: 0.06em;
  --measure: 62ch;

  /* project: layout */
  --nav-h: 64px; --nav-h-compact: 52px;
  --section-y: clamp(64px, 9vw, 128px);
  --touch: 44px;
  --icon: 20px; --icon-lg: 24px;

  /* project: hero sky */
  --sky-1: #8FC6F8; --sky-2: #CBE4FB; --sky-3: #FFFFFF;
  --cloud-opacity: 1;
  --float-a: 14s; --float-b: 17s; --float-c: 12s;
  --float-shift: 6px;

  /* project: the app's own palette (apps/mobile/src/theme.ts). The app is
     light only, so the phone illustration keeps these in dark mode. */
  --app-navy: #0055B8; --app-ink: #0F172A; --app-muted: #64748B;
  --app-paper: #FFFFFF; --app-surface: #F8FAFC; --app-line: #E2E8F0;
  --app-subtle: #F0F7FF; --app-strong-line: #CBD5E1; --app-dark: #0F172A;
  --app-photo: #F1F5F9; --app-spark: #FFCC00;
  --device-frame: #0F172A;
}