/* Cookbook design tokens — Apple HIG (iOS 26 / macOS 26).
   Layout concept: sidebar (≥900px) or a floating tab bar, large-title pages under a sticky glass
   navigation bar, inset-grouped lists on a grouped background. Glass ("Liquid Glass") is for the
   navigation layer only: bars, tab bar, sheets, menus, toasts. Content stays in flat cells.
   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.86);
  /* Glass: navigation layer (bars, tab bar, sheet chrome, menus, toasts) */
  --glass: rgba(255, 255, 255, 0.82);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --glass-edge: rgba(0, 0, 0, 0.07);
  --glass-highlight: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 6px 24px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
  --glass-filter: saturate(180%) blur(24px);
  --glass-lens: rgba(120, 120, 128, 0.14);   /* selected tab, pressed glass button */
  --scroll-edge: #f2f2f7;                    /* soft edge under the bar when content scrolls under it (= the grouped background) */
  /* 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);
  --gray-action: #8e8e93;    /* neutral swipe action */
  --knob: #ffffff;
  --backdrop: rgba(0, 0, 0, 0.28);
  --toast-bg: rgba(28, 28, 30, 0.86);
  --toast-label: #ffffff;
  --sidebar-material: rgba(255, 255, 255, 0.62);
  --sidebar-selected: rgba(120, 120, 128, 0.16);
  --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;
  --c-water: #007aff;
  --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: 600 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;
  /* Shapes: capsule controls, 16 px cells, concentric 8–10 px pictures inside them */
  --radius-sm: 8px; --radius: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px;
  --radius-sheet: 22px;          /* desktop form sheet, phone large detent (top corners) */
  --radius-sheet-float: 30px;    /* phone sheet that fits its content: floats with all corners rounded */
  --inset-list: 16px;        /* left inset of list rows + separators */
  --sidebar-w: 248px;
  --content-max: 960px;
  --detail-max: 720px;
  --bar-h: 44px;             /* navigation bar */
  --tab-h: 62px;             /* floating tab bar */
  --tab-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) - 12px));   /* its distance to the screen edge */

  /* Elevation + motion */
  --shadow-sheet: 0 12px 48px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card: none;       /* cells on the grouped background are flat, as in iOS */
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  --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);
  --spring: cubic-bezier(0.32, 0.72, 0, 1);              /* UIKit sheet / push curve */
  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);    /* small overshoot: checks, taps */
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;
  --dur-sheet: 420ms;
  --dur-push: 380ms;
  --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.86);
    --glass: rgba(40, 40, 44, 0.74);
    --glass-strong: rgba(40, 40, 44, 0.90);
    --glass-edge: rgba(255, 255, 255, 0.10);
    --glass-highlight: rgba(255, 255, 255, 0.14);
    --glass-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);
    --glass-lens: rgba(255, 255, 255, 0.12);
    --scroll-edge: #000000;
    --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);
    --gray-action: #636366;
    --knob: #ffffff;
    --backdrop: rgba(0, 0, 0, 0.55);
    --toast-bg: rgba(58, 58, 60, 0.92);
    --toast-label: #ffffff;
    --sidebar-material: rgba(28, 28, 30, 0.80);
    --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;
    --c-water: #0a84ff;
    --chart-dot: rgba(235, 235, 245, 0.45);
    --shadow-sheet: 0 12px 48px 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.86);
  --glass: rgba(40, 40, 44, 0.74);
  --glass-strong: rgba(40, 40, 44, 0.90);
  --glass-edge: rgba(255, 255, 255, 0.10);
  --glass-highlight: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);
  --glass-lens: rgba(255, 255, 255, 0.12);
  --scroll-edge: #000000;
  --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);
  --gray-action: #636366;
  --knob: #ffffff;
  --backdrop: rgba(0, 0, 0, 0.55);
  --toast-bg: rgba(58, 58, 60, 0.92);
  --toast-label: #ffffff;
  --sidebar-material: rgba(28, 28, 30, 0.80);
  --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;
  --c-water: #0a84ff;
  --chart-dot: rgba(235, 235, 245, 0.45);
  --shadow-sheet: 0 12px 48px rgba(0, 0, 0, 0.6);
  --shadow-card: none;
  color-scheme: dark;
}
/* Dark mode, elevated: a sheet sits on the dimmed page, so it uses the elevated grouped colours
   (iOS systemGroupedBackground in an elevated context), not the black page background. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) dialog.sheet { --bg-grouped: #1c1c1e; --bg-elevated: #2c2c2e; --bg-elevated-2: #3a3a3c; --segment-selected: #6c6c70; }
}
:root[data-theme="dark"] dialog.sheet { --bg-grouped: #1c1c1e; --bg-elevated: #2c2c2e; --bg-elevated-2: #3a3a3c; --segment-selected: #6c6c70; }