:root {
  color-scheme: light;
  --bg: #f7f8fb;
  --bg-elevated: #ffffff;
  --bg-elevated-rgb: 255, 255, 255;
  --bg-muted: #eef1f6;
  --surface-border: #dce3ef;
  --text-primary: #12151f;
  --text-secondary: #4f5b73;
  --text-inverse: #f7f9ff;
  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --brand-soft: #dbe7ff;
  --shadow-sm: 0 2px 10px rgba(18, 21, 31, 0.08);

  /* Macro colors (analysis card). */
  --macro-carbs: var(--brand);
  --macro-fat: #f59e0b;
  --macro-protein: #16a34a;

  /* Tap target minimum (Apple HIG 44px). */
  --tap-target-min: 2.75rem;

  /* Spacing scale. */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */

  /* Border radius scale. */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 999px;

  /* Status colors. */
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: var(--brand);

  /* Calorie counter colors (match Flutter AppColors.calorieText bands). */
  --calorie-low: #f59e0b;
  --calorie-caution: #14b8a6;
  --calorie-good: #10b981;
  --calorie-overshoot: #ef4444;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0f131b;
    --bg-elevated: #151b26;
    --bg-elevated-rgb: 21, 27, 38;
    --bg-muted: #1a2231;
    --surface-border: #2d3950;
    --text-primary: #eef2fb;
    --text-secondary: #afbdd7;
    --text-inverse: #0f131b;
    --brand: #6ea8ff;
    --brand-strong: #89b9ff;
    --brand-soft: #21314c;
    --shadow-sm: 0 2px 14px rgba(0, 0, 0, 0.3);

    --macro-carbs: color-mix(in oklab, var(--brand) 86%, white 14%);
    --macro-fat: #fbbf24;
    --macro-protein: color-mix(in oklab, #16a34a 88%, white 12%);

    --calorie-low: #fbbf24;
    --calorie-caution: #2dd4bf;
    --calorie-good: #34d399;
    --calorie-overshoot: #f87171;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f131b;
  --bg-elevated: #151b26;
  --bg-elevated-rgb: 21, 27, 38;
  --bg-muted: #1a2231;
  --surface-border: #2d3950;
  --text-primary: #eef2fb;
  --text-secondary: #afbdd7;
  --text-inverse: #0f131b;
  --brand: #6ea8ff;
  --brand-strong: #89b9ff;
  --brand-soft: #21314c;
  --shadow-sm: 0 2px 14px rgba(0, 0, 0, 0.3);

  --macro-carbs: color-mix(in oklab, var(--brand) 86%, white 14%);
  --macro-fat: #fbbf24;
  --macro-protein: color-mix(in oklab, #16a34a 88%, white 12%);

  --calorie-low: #fbbf24;
  --calorie-caution: #2dd4bf;
  --calorie-good: #34d399;
  --calorie-overshoot: #f87171;
}