/* Generated from tokens.json — do not hand-edit; regenerate if tokens.json changes. */

:root,
[data-theme="light"] {
  --surface-page: #fbf7f1;
  --surface-card: #ffffff;
  --surface-sunken: #f1eae0;
  --border-subtle: #e5dccd;
  --border-strong: #9c8b6e;
  --ink: #221c16;
  --ink-muted: #6b6058;
  --ink-faint: #9c9186;
  --brand: #2f6b4f;
  --brand-subtle: #e3eee7;
  --accent: #c1451f;
  --accent-subtle: #fbe4da;
  --on-accent: #ffffff;
  --status-success: #1f7a5c;
  --status-success-subtle: #e1f0e9;
  --status-warning: #b8760f;
  --status-warning-subtle: #fbeeda;
  --status-danger: #c1432d;
  --status-danger-subtle: #fbe3dd;
  --macro-protein: #a6690a;
  --macro-carbs: #2563a6;
  --macro-fat: #b23a5c;
  --focus-ring: #1d6fbf;
  --shadow-sm: 0 1px 2px rgba(34,28,22,0.06), 0 1px 1px rgba(34,28,22,0.08);
  --shadow-md: 0 8px 20px rgba(34,28,22,0.12);
  --shadow-lg: 0 20px 40px rgba(34,28,22,0.18);
}

[data-theme="dark"] {
  --surface-page: #1d1a17;
  --surface-card: #262220;
  --surface-sunken: #16130f;
  --border-subtle: #363029;
  --border-strong: #766b5a;
  --ink: #f3ece3;
  --ink-muted: #b4a99c;
  --ink-faint: #85796c;
  --brand: #4fae86;
  --brand-subtle: #21372c;
  --accent: #f07a55;
  --accent-subtle: #3a2a22;
  --on-accent: #241a14;
  --status-success: #34a57e;
  --status-success-subtle: #1c3229;
  --status-warning: #d69a3a;
  --status-warning-subtle: #332616;
  --status-danger: #e2604a;
  --status-danger-subtle: #34211b;
  --macro-protein: #a6690a;
  --macro-carbs: #4c8fd1;
  --macro-fat: #c5507a;
  --focus-ring: #6ab2f2;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.6);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.display-xl { font-family: var(--font-sans); font-size: 44px; line-height: 48px; font-weight: 700; }
.display { font-family: var(--font-sans); font-size: 30px; line-height: 36px; font-weight: 700; }
.title-lg { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 700; }
.title { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 700; }
.body-lg { font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 500; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 21px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.03em; }
.caption { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 600; }