/* GENERATED by scripts/web-tokens.mjs from docs/design-system/tokens.json — do not edit.
   Run `yarn web:tokens`. Dark is the brand default; light from each token's `light` value. */

:root {
  --color-palette-ink: #181818;
  --color-palette-grey: #979797;
  --color-palette-sand: #a49996;
  --color-palette-white: #ffffff;
  --color-palette-mist: #e1e1e1;
  --color-macro-protein: #FF6B6B;
  --color-macro-fiber: #4ECDC4;
  --color-macro-omega3: #FFD93D;
  --color-macro-magnesium: #95E1D3;
  --color-macro-carbs: #F38181;
  --color-macro-fats: #AA96DA;
  --color-macro-calories: #FCBAD3;
  --color-bg: #181818;
  --color-bg-elevated: #222222;
  --color-surface-glass: rgba(255,255,255,0.06);
  --color-surface-glass-alt: rgba(255,255,255,0.10);
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255,255,255,0.72);
  --color-text-muted: rgba(255,255,255,0.56);
  --color-border-glass: rgba(255,255,255,0.22);
  --color-shadow: rgba(0,0,0,0.45);
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-danger-text: #fc9090;
  --color-accent: #a49996;
  --color-accent-text: #b8afac;
  --color-accent-tint: #a49996;
  --color-on-accent-tint: #181818;
  --color-track: rgba(255,255,255,0.15);
  --opacity-tint: 0.18;
  --opacity-inactive: 0.3;
  --opacity-disabled: 0.4;
  --opacity-glass: 0.6;
  --opacity-glass-heavy: 0.8;
  --blur-glass-background: 28px;
  --blur-glass-alt: 36px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-3xl: 40px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --stroke-hairline: 0.5px;
  --stroke-thin: 1px;
  --stroke-thick: 2px;
  --elevation-card-shadow: 0 6px 24px rgba(0,0,0,0.35);
  --elevation-floating: 0 10px 30px rgba(0,0,0,0.45);
  --font-family-base: Gotham, -apple-system, SF Pro Text, Inter, system-ui, Arial;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 22px;
  --font-size-display: 34px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.35;
  --letter-spacing-tight: -0.2px;
  --letter-spacing-normal: 0;
  --letter-spacing-caps: 0.6px;
  --icon-size-sm: 15px;
  --icon-size-md: 17px;
  --icon-size-lg: 22px;
  --icon-size-xl: 34px;
  --motion-duration-fast: 120ms;
  --motion-duration-base: 180ms;
  --motion-duration-slow: 240ms;
  --motion-duration-slower: 360ms;
  --motion-duration-count-up: 650ms;
  --motion-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-easing-emph: cubic-bezier(0.2, 0.8, 0, 1);
  --motion-press-scale: 0.96;
  --motion-stagger-step: 50ms;
  --component-glass-card-background-color: rgba(255,255,255,0.06);
  --component-glass-card-border-color: rgba(255,255,255,0.22);
  --component-glass-card-radius: 20px;
  --component-glass-card-backdrop-blur: 28px;
  --component-glass-card-shadow: 0 6px 24px rgba(0,0,0,0.35);
  --component-glass-card-padding: 16px;
  --component-pill-radius: 999px;
  --component-pill-padding-x: 12px;
  --component-pill-padding-y: 4px;
  --component-pill-bg-positive: rgba(34,197,94,0.15);
  --component-pill-bg-warning: rgba(245,158,11,0.18);
  --component-pill-text: #ffffff;
  --component-gauge-arc-thickness: 10px;
  --component-gauge-arc-bg-track: rgba(255,255,255,0.15);
  --component-gauge-arc-good: #22c55e;
  --component-gauge-arc-mid: #f59e0b;
  --component-gauge-arc-bad: #ef4444;
  --component-stat-bar-height: 8px;
  --component-stat-bar-bg: rgba(255,255,255,0.14);
  --component-stat-bar-radius: 12px;
  color-scheme: dark;
}

:root[data-theme="dark"] {
  --color-bg: #181818;
  --color-bg-elevated: #222222;
  --color-surface-glass: rgba(255,255,255,0.06);
  --color-surface-glass-alt: rgba(255,255,255,0.10);
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255,255,255,0.72);
  --color-text-muted: rgba(255,255,255,0.56);
  --color-border-glass: rgba(255,255,255,0.22);
  --color-shadow: rgba(0,0,0,0.45);
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-danger-text: #fc9090;
  --color-accent: #a49996;
  --color-accent-text: #b8afac;
  --color-track: rgba(255,255,255,0.15);
  --elevation-card-shadow: 0 6px 24px rgba(0,0,0,0.35);
  --elevation-floating: 0 10px 30px rgba(0,0,0,0.45);
  --component-glass-card-background-color: rgba(255,255,255,0.06);
  --component-glass-card-border-color: rgba(255,255,255,0.22);
  --component-glass-card-shadow: 0 6px 24px rgba(0,0,0,0.35);
  --component-pill-text: #ffffff;
  --component-gauge-arc-bg-track: rgba(255,255,255,0.15);
  --component-stat-bar-bg: rgba(255,255,255,0.14);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg: #ffffff;
    --color-bg-elevated: #f6f6f6;
    --color-surface-glass: rgba(24,24,24,0.04);
    --color-surface-glass-alt: rgba(24,24,24,0.07);
    --color-text-primary: #181818;
    --color-text-secondary: rgba(24,24,24,0.72);
    --color-text-muted: rgba(24,24,24,0.64);
    --color-border-glass: #e1e1e1;
    --color-shadow: rgba(0,0,0,0.25);
    --color-success: #166534;
    --color-warning: #92400e;
    --color-danger: #dc2626;
    --color-danger-text: #b91c1c;
    --color-accent: #6b625f;
    --color-accent-text: #6b625f;
    --color-track: rgba(24,24,24,0.10);
    --elevation-card-shadow: 0 6px 24px rgba(0,0,0,0.09);
    --elevation-floating: 0 10px 30px rgba(0,0,0,0.12);
    --component-glass-card-background-color: rgba(24,24,24,0.04);
    --component-glass-card-border-color: #e1e1e1;
    --component-glass-card-shadow: 0 6px 24px rgba(0,0,0,0.09);
    --component-pill-text: #181818;
    --component-gauge-arc-bg-track: rgba(24,24,24,0.15);
    --component-stat-bar-bg: rgba(24,24,24,0.14);
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --color-bg: #ffffff;
  --color-bg-elevated: #f6f6f6;
  --color-surface-glass: rgba(24,24,24,0.04);
  --color-surface-glass-alt: rgba(24,24,24,0.07);
  --color-text-primary: #181818;
  --color-text-secondary: rgba(24,24,24,0.72);
  --color-text-muted: rgba(24,24,24,0.64);
  --color-border-glass: #e1e1e1;
  --color-shadow: rgba(0,0,0,0.25);
  --color-success: #166534;
  --color-warning: #92400e;
  --color-danger: #dc2626;
  --color-danger-text: #b91c1c;
  --color-accent: #6b625f;
  --color-accent-text: #6b625f;
  --color-track: rgba(24,24,24,0.10);
  --elevation-card-shadow: 0 6px 24px rgba(0,0,0,0.09);
  --elevation-floating: 0 10px 30px rgba(0,0,0,0.12);
  --component-glass-card-background-color: rgba(24,24,24,0.04);
  --component-glass-card-border-color: #e1e1e1;
  --component-glass-card-shadow: 0 6px 24px rgba(0,0,0,0.09);
  --component-pill-text: #181818;
  --component-gauge-arc-bg-track: rgba(24,24,24,0.15);
  --component-stat-bar-bg: rgba(24,24,24,0.14);
  color-scheme: light;
}