/* ---- Nutrio design tokens (refreshed to match mockups m1–m34) ---- */
:root {
  --brand: #aede38;          /* lime — pill CTAs, active tab, accents */
  --brand-2: #8bba2f;
  --brand-soft: #e9f5c8;
  --brand-bg: #c4e07a;       /* hero gradient stop */
  --brand-bg-2: #aede38;     /* hero gradient stop */
  --brand-ink: #1a2a05;      /* on-brand text */

  --bg: #ffffff;             /* page background */
  --surface: #ffffff;        /* cards */
  --surface-2: #f5f5f7;      /* inset fields / tabs bg */
  --surface-3: #e9eaee;
  --section-bg: #f5f5f7;     /* sectioned background behind cards */

  --text: #111419;
  --text-2: #5a5f69;
  --text-3: #9398a3;
  --border: #ececec;
  --shadow: 0 8px 24px rgba(15,20,30,.06);
  --shadow-lg: 0 16px 36px rgba(15,20,30,.10);

  --carb: #ff8a47;
  --protein: #f55353;
  --fat: #4aa6ff;
  --water: #3fa9ff;
  --step: #ffb629;
  --weight: #ff6b3d;
  --bmi-mauve: #a955e8;
  --danger: #ff4d4f;
  --success: #27c08a;

  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);

  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[data-theme="dark"] {
  --bg: #0e1413;
  --surface: #18211f;
  --surface-2: #1f2a28;
  --surface-3: #2a3735;
  --text: #f3f6f3;
  --text-2: #a5b1ad;
  --text-3: #6f7c79;
  --border: #2a3735;
  --shadow: 0 6px 22px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 34px rgba(0,0,0,.65);
  --brand-soft: #4a6420;
  --brand-bg: #527c1f;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #0e1413; --surface: #18211f; --surface-2: #1f2a28; --surface-3: #2a3735;
    --text: #f3f6f3; --text-2: #a5b1ad; --text-3: #6f7c79; --border: #2a3735;
    --shadow: 0 6px 22px rgba(0,0,0,.5); --shadow-lg: 0 12px 34px rgba(0,0,0,.65);
    --brand-soft: #4a6420; --brand-bg: #527c1f;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body { font-size: 15px; line-height: 1.45; -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

#app {
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

/* Page-level helpers — most mockups use a light-gray section bg with white cards. */
.page { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.page-bg { background: var(--section-bg); }
.page > .padded { padding: 12px 16px 80px; }
.page > .padded.lg { padding: 16px 16px 120px; }