/* Cookbook design tokens — Apple HIG.
   Layout concept: sidebar (≥900px) or tab bar, large-title pages, inset-grouped lists on a grouped background.
   Every color in the app comes from here. Light values on :root, dark values redefined below. */
:root {
  /* Labels */
  --label: #000000;
  --label-2: rgba(60, 60, 67, 0.60);
  --label-3: rgba(60, 60, 67, 0.30);
  --label-on-tint: #ffffff;
  /* Backgrounds (grouped) */
  --bg-grouped: #f2f2f7;
  --bg-elevated: #ffffff;
  --bg-elevated-2: #f2f2f7;
  --fill: rgba(120, 120, 128, 0.12);
  --fill-2: rgba(120, 120, 128, 0.20);
  --separator: rgba(60, 60, 67, 0.29);
  --material: rgba(249, 249, 249, 0.82);     /* translucent bars */
  --segment-selected: #ffffff;
  --menu-bg: rgba(250, 250, 250, 0.92);
  /* Tint + system colors (accessible text variants) */
  --tint: #248a3d;           /* system green, AA on white */
  --tint-fill: rgba(52, 199, 89, 0.15);
  --blue: #007aff;
  --orange: #c93400;
  --orange-fill: rgba(255, 149, 0, 0.16);
  --red: #d70015;
  --red-fill: rgba(255, 59, 48, 0.12);
  --yellow-fill: rgba(255, 204, 0, 0.22);
  --blue-fill: rgba(0, 122, 255, 0.12);
  --knob: #ffffff;
  --backdrop: rgba(0, 0, 0, 0.32);
  --toast-bg: rgba(28, 28, 30, 0.92);
  --toast-label: #ffffff;
  --sidebar-material: rgba(236, 236, 241, 0.78);
  --sidebar-selected: rgba(0, 0, 0, 0.08);
  --focus: rgba(0, 122, 255, 0.55);
  /* Macro colors (charts, chips) */
  --c-kcal: #248a3d;
  --c-protein: #c93400;
  --c-carbs: #0071a4;
  --c-fat: #8944ab;
  --c-fiber: #3e8a60;
  --chart-dot: rgba(60, 60, 67, 0.42);   /* weigh-in dots */

  /* Type — SF Pro via the system stack */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --t-large-title: 700 34px/41px var(--font-display);
  --t-title-1: 700 28px/34px var(--font-display);
  --t-title-2: 700 22px/28px var(--font-display);
  --t-title-3: 600 20px/25px var(--font-display);
  --t-headline: 600 17px/22px var(--font);
  --t-body: 400 17px/22px var(--font);
  --t-callout: 400 16px/21px var(--font);
  --t-subhead: 400 15px/20px var(--font);
  --t-footnote: 400 13px/18px var(--font);
  --t-caption: 400 12px/16px var(--font);
  --t-segment: 500 13px/18px var(--font);
  --t-button-sm: 600 15px/20px var(--font);
  --t-chip: 600 12px/16px var(--font);
  --t-tab: 500 10px/12px var(--font);
  --t-sidebar-label: 600 11px/14px var(--font);
  --t-metric: 700 28px/32px var(--font-rounded);
  --t-metric-sm: 700 22px/26px var(--font-rounded);
  --t-metric-lg: 700 44px/48px var(--font-rounded);
  --t-stepper: 400 22px/1 var(--font);
  --tracking-large: 0.011em;   /* SF Display tracking at 34px is slightly positive */

  /* Spacing — 4px grid */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 44px;
  --hit: 44px;
  --radius-sm: 8px; --radius: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;
  --inset-list: 16px;        /* left inset of list rows + separators */
  --sidebar-w: 240px;
  --content-max: 960px;
  --detail-max: 720px;

  /* Elevation + motion */
  --shadow-sheet: 0 10px 40px rgba(0, 0, 0, 0.18);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-segment: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
  --shadow-knob: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.06);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;
  --row-icon: 30px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --label: #ffffff;
    --label-2: rgba(235, 235, 245, 0.60);
    --label-3: rgba(235, 235, 245, 0.30);
    --label-on-tint: #000000;
    --bg-grouped: #000000;
    --bg-elevated: #1c1c1e;
    --bg-elevated-2: #2c2c2e;
    --fill: rgba(120, 120, 128, 0.24);
    --fill-2: rgba(120, 120, 128, 0.32);
    --separator: rgba(84, 84, 88, 0.65);
    --material: rgba(30, 30, 30, 0.80);
    --segment-selected: #636366;
    --menu-bg: rgba(44, 44, 46, 0.94);
    --tint: #30d158;
    --tint-fill: rgba(48, 209, 88, 0.20);
    --blue: #0a84ff;
    --orange: #ff9f0a;
    --orange-fill: rgba(255, 159, 10, 0.20);
    --red: #ff453a;
    --red-fill: rgba(255, 69, 58, 0.20);
    --yellow-fill: rgba(255, 214, 10, 0.20);
    --blue-fill: rgba(10, 132, 255, 0.20);
    --knob: #ffffff;
    --backdrop: rgba(0, 0, 0, 0.55);
    --toast-bg: rgba(58, 58, 60, 0.95);
    --toast-label: #ffffff;
    --sidebar-material: rgba(28, 28, 30, 0.78);
    --sidebar-selected: rgba(255, 255, 255, 0.10);
    --focus: rgba(10, 132, 255, 0.70);
    --shadow-segment: 0 3px 8px rgba(0, 0, 0, 0.30), 0 3px 1px rgba(0, 0, 0, 0.10);
    --shadow-knob: 0 3px 8px rgba(0, 0, 0, 0.30), 0 1px 1px rgba(0, 0, 0, 0.16);
    --shadow-card-hover: 0 0 0 0.5px rgba(255, 255, 255, 0.10);
    --c-kcal: #30d158;
    --c-protein: #ff9f0a;
    --c-carbs: #64d2ff;
    --c-fat: #bf5af2;
    --c-fiber: #66d4a0;
    --chart-dot: rgba(235, 235, 245, 0.45);
    --shadow-sheet: 0 10px 40px rgba(0, 0, 0, 0.6);
    --shadow-card: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --label: #ffffff;
  --label-2: rgba(235, 235, 245, 0.60);
  --label-3: rgba(235, 235, 245, 0.30);
  --label-on-tint: #000000;
  --bg-grouped: #000000;
  --bg-elevated: #1c1c1e;
  --bg-elevated-2: #2c2c2e;
  --fill: rgba(120, 120, 128, 0.24);
  --fill-2: rgba(120, 120, 128, 0.32);
  --separator: rgba(84, 84, 88, 0.65);
  --material: rgba(30, 30, 30, 0.80);
  --segment-selected: #636366;
  --menu-bg: rgba(44, 44, 46, 0.94);
  --tint: #30d158;
  --tint-fill: rgba(48, 209, 88, 0.20);
  --blue: #0a84ff;
  --orange: #ff9f0a;
  --orange-fill: rgba(255, 159, 10, 0.20);
  --red: #ff453a;
  --red-fill: rgba(255, 69, 58, 0.20);
  --yellow-fill: rgba(255, 214, 10, 0.20);
  --blue-fill: rgba(10, 132, 255, 0.20);
  --knob: #ffffff;
  --backdrop: rgba(0, 0, 0, 0.55);
  --toast-bg: rgba(58, 58, 60, 0.95);
  --toast-label: #ffffff;
  --sidebar-material: rgba(28, 28, 30, 0.78);
  --sidebar-selected: rgba(255, 255, 255, 0.10);
  --focus: rgba(10, 132, 255, 0.70);
  --shadow-segment: 0 3px 8px rgba(0, 0, 0, 0.30), 0 3px 1px rgba(0, 0, 0, 0.10);
  --shadow-knob: 0 3px 8px rgba(0, 0, 0, 0.30), 0 1px 1px rgba(0, 0, 0, 0.16);
  --shadow-card-hover: 0 0 0 0.5px rgba(255, 255, 255, 0.10);
  --c-kcal: #30d158;
  --c-protein: #ff9f0a;
  --c-carbs: #64d2ff;
  --c-fat: #bf5af2;
  --c-fiber: #66d4a0;
  --chart-dot: rgba(235, 235, 245, 0.45);
  --shadow-sheet: 0 10px 40px rgba(0, 0, 0, 0.6);
  --shadow-card: none;
  color-scheme: dark;
}