:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --app-width: 480px;
  --app-gutter: max(0px, calc(50% - var(--app-width) / 2));

  --font-mono: "Red Hat Mono", "Geist Mono", ui-monospace, monospace;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --type-display: 3.5rem;
  --type-title: 1.75rem;
  --type-heading: 1.25rem;
  --type-body: 0.9375rem;
  --type-label: 0.8125rem;
  --type-caption: 0.6875rem;
  --type-input: 1rem;

  --purple-500: #8b5cf6;
  --amber-500: #fbbf24;
  --red-400: #f87171;
}

:root {
  --theme-bg: #000000;
  --theme-surface: #0a0a0a;
  --theme-text: #ffffff;
  --theme-muted: #737373;
  --theme-accent: #0070f3;
  --theme-accent-text: #ffffff;
  --theme-green: #22c55e;
  --theme-protein: #f97066;
  --theme-fat: #fbbf24;
  --theme-carbs: #22c55e;
}

body {
  --bg: var(--theme-bg);
  --bg-elevated: var(--theme-surface);
  --text: var(--theme-text);
  --text-invert: var(--theme-bg);
  --gray-1000: color-mix(in srgb, var(--theme-text) 4%, var(--theme-bg));
  --gray-900: color-mix(in srgb, var(--theme-text) 9%, var(--theme-bg));
  --gray-800: color-mix(in srgb, var(--theme-text) 15%, var(--theme-bg));
  --gray-700: color-mix(in srgb, var(--theme-text) 25%, var(--theme-bg));
  --gray-600: color-mix(in srgb, var(--theme-text) 34%, var(--theme-bg));
  --gray-500: var(--theme-muted);
  --gray-400: color-mix(in srgb, var(--theme-text) 64%, var(--theme-bg));
  --gray-300: color-mix(in srgb, var(--theme-text) 83%, var(--theme-bg));
  --gray-200: color-mix(in srgb, var(--theme-text) 90%, var(--theme-bg));
  --gray-100: color-mix(in srgb, var(--theme-text) 96%, var(--theme-bg));
  --gray-50: color-mix(in srgb, var(--theme-text) 98%, var(--theme-bg));
  --btn-primary-bg: var(--theme-text);
  --btn-primary-text: var(--theme-bg);
  --blue-500: var(--theme-accent);
  --blue-600: color-mix(in srgb, var(--theme-accent) 85%, black);
  --accent-text: var(--theme-accent-text);
  --green-500: var(--theme-green);
  --focus-ring: color-mix(in srgb, var(--theme-text) 6%, transparent);
  --shadow-color: color-mix(in srgb, var(--theme-text) 12%, transparent);
  --backdrop: rgba(0, 0, 0, 0.55);
  --danger: #f87171;
  --flash-notice-bg: rgba(34, 197, 94, 0.1);
  --flash-notice-text: #86efac;
  --flash-notice-border: rgba(34, 197, 94, 0.3);
  --flash-alert-bg: rgba(239, 68, 68, 0.1);
  --flash-alert-text: #fca5a5;
  --flash-alert-border: rgba(239, 68, 68, 0.3);
  color-scheme: dark;
}

@supports (color: color-mix(in srgb, red, blue)) {
  body {
    --danger: color-mix(in srgb, #ef4444 85%, var(--theme-text));
  }
}