/* ================================================================
   TOKENS: shared by every Health page. Each one has the same name and value
   in meal-prep.html and phase-plan.html; tokens only one page uses stay in that page.
   Theme colors are light-dark(light, dark); color-scheme on :root picks the side.
   ================================================================ */
:root {
  color-scheme: light dark;

  /* System hues: tints and washes */
  --orange: light-dark(#FF8D28, #FF9230);
  --green: light-dark(#34C759, #30D158);
  --teal: light-dark(#00C3D0, #00D2E0);
  --blue: light-dark(#0088FF, #0091FF);
  --indigo: light-dark(#6155F5, #6D7CFF);

  /* Text-safe hues: filled keys, dots, bars, icon tiles */
  --orange-text: light-dark(#C55300, #FF9230);
  --green-text: light-dark(#008932, #30D158);
  --teal-text: light-dark(#008198, #00D2E0);
  --blue-text: light-dark(#1E6EF4, #0091FF);
  --indigo-text: light-dark(#564ADE, #6D7CFF);
  --gray-text: light-dark(#6C6C70, #8E8E93);

  /* Labels and fills */
  --label: light-dark(#000000, #FFFFFF);
  --label-2-text: light-dark(rgba(60,60,67,.75), rgba(235,235,245,.7));
  --fill-1: light-dark(rgba(120,120,128,.2), rgba(120,120,128,.36));
  --fill-2: light-dark(rgba(120,120,128,.16), rgba(120,120,128,.32));
  --fill-3: light-dark(rgba(118,118,128,.12), rgba(118,118,128,.24));
  --fill-4: light-dark(rgba(116,116,128,.08), rgba(118,118,128,.18));

  /* Backgrounds and separators */
  --bg: light-dark(#FFFFFF, #000000);
  --grouped-bg: light-dark(#F2F2F7, #000000);
  --grouped-bg-2: light-dark(#FFFFFF, #1C1C1E);
  --grouped-bg-3: light-dark(#F2F2F7, #2C2C2E);   /* anything nested in a card */
  --separator: light-dark(rgba(60,60,67,.29), rgba(84,84,88,.6));

  /* Roles */
  --page: var(--grouped-bg);
  --row-bg: var(--grouped-bg-2);
  --accent: var(--blue);
  --on-fill: light-dark(#FFFFFF, #000000);         /* label on a --*-text fill: 4.5:1+ both modes */

  /* Type: iOS Dynamic Type Large; 1rem = Body 17px */
  --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --t-large-title: 400 calc(1rem + 17px)/1.2059 var(--font-display);   /* 34/41 */
  --t-title3: 400 calc(1rem + 3px)/1.25 var(--font-display);           /* 20/25 */
  --t-headline: 600 1rem/1.2941 var(--font-text);                      /* 17/22 */
  --t-body: 400 1rem/1.2941 var(--font-text);                          /* 17/22 */
  --t-subhead: 400 calc(1rem - 2px)/1.3333 var(--font-text);           /* 15/20 */

  /* Spacing: 4px grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px;
  --margin: 16px;                          /* each page sets its own from 768px */

  /* Radii: capsule for controls, concentric inside cards */
  --r-capsule: 999px;
  --r-card: 26px;
  --r-inner: 14px;                         /* --r-card minus the 12px card padding */

  /* Glass: frost + tint + edge highlight */
  --glass-bg: light-dark(rgba(250,250,252,.8), rgba(22,22,23,.8));
  --glass-bg-solid: light-dark(rgba(250,250,252,.92), rgba(22,22,23,.88));
  --glass-bg-opaque: light-dark(#FAFAFC, #161617);
  --glass-ink: light-dark(rgba(0,0,0,.85), rgba(255,255,255,.92));
  --glass-fill: var(--fill-2);
  --glass-hl: inset 0 1px 0 light-dark(rgba(255,255,255,.75), rgba(255,255,255,.14)), inset 0 0 0 1px light-dark(rgba(255,255,255,.35), rgba(255,255,255,.16));
  --glass-ring: 0 0 0 1px light-dark(rgba(0,0,0,.06), rgba(0,0,0,.5));
  --glass-shadow: 0 6px 20px light-dark(rgba(0,0,0,.1), rgba(0,0,0,.4));
  --glass-press: light-dark(rgba(255,255,255,.35), rgba(255,255,255,.12));
  --glass-hover: light-dark(rgba(255,255,255,.18), rgba(255,255,255,.06));

  /* Motion: Apple spring preset as a linear() curve */
  --ease-smooth: linear(0, 0.004 1%, 0.019 2.3%, 0.042 3.5%, 0.079 5%, 0.161 7.8%, 0.362 13.8%, 0.465 17%, 0.558 20.3%, 0.638 23.5%, 0.706 26.8%, 0.768 30.3%, 0.818 33.8%, 0.86 37.5%, 0.899 42%, 0.929 46.8%, 0.953 52.3%, 0.971 58.5%, 0.983 65.5%, 0.991 73.8%, 1);
  --ease-fade: ease;
  --dur-press: 220ms;
  --dur-fade: 200ms;

  /* Layers and sizes */
  --z-edge: 19;
  --z-bar: 20;
  --hit: 44px;
  --bar-h: 56px;                           /* top bar content height */
  --tabbar-h: 62px;

  /* Safe areas: 0px on Windows */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --bar-bottom: max(8px, calc(var(--safe-b) - 13px)); /* 21px above the screen edge on Face ID iPhones */
  --gut-l: max(var(--margin), var(--safe-l));
  --gut-r: max(var(--margin), var(--safe-r));
}
/* Test hook only: no on-screen theme switch */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Increase Contrast: Apple's increased-contrast values */
@media (prefers-contrast: more) {
  :root {
    --orange: light-dark(#C55300, #FFA056);
    --green: light-dark(#008932, #4AD968);
    --teal: light-dark(#008198, #3BDDEC);
    --blue: light-dark(#1E6EF4, #5CB8FF);
    --indigo: light-dark(#564ADE, #A7AAFF);
    --orange-text: light-dark(#C55300, #FFA056);
    --green-text: light-dark(#008932, #4AD968);
    --teal-text: light-dark(#008198, #3BDDEC);
    --blue-text: light-dark(#1E6EF4, #5CB8FF);
    --indigo-text: light-dark(#564ADE, #A7AAFF);
    --gray-text: light-dark(#6C6C70, #AEAEB2);
    --label-2-text: light-dark(rgba(60,60,67,.8), rgba(235,235,245,.8));
    --fill-1: light-dark(rgba(120,120,128,.28), rgba(120,120,128,.44));
    --fill-2: light-dark(rgba(120,120,128,.24), rgba(120,120,128,.4));
    --fill-3: light-dark(rgba(118,118,128,.2), rgba(118,118,128,.32));
    --fill-4: light-dark(rgba(116,116,128,.16), rgba(118,118,128,.26));
    --grouped-bg: light-dark(#EBEBF0, #000000);
    --grouped-bg-2: light-dark(#FFFFFF, #242426);
    --separator: light-dark(rgba(60,60,67,.37), rgba(84,84,88,.68));
  }
}