/* ==========================================================================
   pp-tokens.css: the one shared colour-token file (A-037 / A-039).
   Loaded LAST by the app (index.html) and by every public page.

   Theme contract
     light (default): html[data-theme="light"] in the app; public pages keep no attribute.
     dark (opt-in from Settings > Appearance, stored as localStorage pp_theme="dark"):
       html[data-theme="dark"] on the app AND on public pages (same head snippet).
   Light values below reproduce the existing light rendering exactly, so light is unchanged.
   The only light-mode changes are the public-page WCAG AA fixes (P0), marked "P0".
   Print is always light (see the @media print block at the end).
   ========================================================================== */

/* ---------- 1. Semantic tokens: light (default) ---------- */
:root{
  /* surfaces and lines (vNext mobile light values) */
  --pp-c-shell:#f4f8f6;
  --pp-c-shell-top:#f8fbf9;
  --pp-c-surface:#ffffff;
  --pp-c-surface-soft:#f7faf8;
  --pp-c-field-strong:#ffffff;
  --pp-c-line:#dce8e2;
  --pp-c-line-2:#d9e7e1;
  --pp-c-ink:#10211b;
  --pp-c-muted:#6c8279;
  --pp-c-label:#526b61;
  --pp-c-icon-dim:#87a097;
  --pp-c-icon-dim-2:#8ba098;
  --pp-c-row-hover:#fbfdfc;
  --pp-c-track:#e6efea;
  --pp-c-glass:rgba(255,255,255,.72);
  --pp-c-hero-glass:rgba(248,251,249,.94);
  --pp-c-header-bg:rgba(255,255,255,.94);
  --pp-c-sheet:rgba(255,255,255,.985);
  /* segmented controls (Track / Plan switcher, calculator mode toggle) */
  --pp-c-seg-bg:#edf5f1;
  --pp-c-seg-ink:#61786e;
  --pp-c-seg-active-bg:#dff2ea;
  --pp-c-seg-raised-bg:#ffffff;
  /* bottom nav */
  --pp-c-nav-bg:rgba(255,255,255,.97);
  --pp-c-nav-ink:#6f847b;
  --pp-c-nav-ring:#ffffff;
  /* green tints */
  --pp-c-tint-soft:#eef7f4;
  --pp-c-tint-soft-2:#eaf5f1;
  --pp-c-tint-line:#cfe5da;
  --pp-c-tint-line-2:#c7eadc;
  --pp-c-tint-top:#f4fbf7;
  --pp-c-tint-top-2:#f3fbf7;
  --pp-c-tint-border:#cde7dc;
  --pp-c-tint-border-2:#c9e8db;
  --pp-c-progress-line:#d9ece4;
  --pp-c-progress-bg:#f9fcfb;
  --pp-c-identity-fill:#087d59;
  /* accent text and the ink that sits on an accent fill */
  --pp-c-accent:#087d59; --pp-c-on-accent:#ffffff; --pp-c-warn-soft-ink:#7a4e06;
  /* insight tones */
  --pp-c-neg-bg:#fff7f7; --pp-c-neg-line:#f0caca; --pp-c-neg-icon-bg:#fde9e9; --pp-c-neg-ink:#b43e3e;
  --pp-c-pos-bg:#f7fcf9; --pp-c-pos-line:#cfe7d8; --pp-c-pos-icon-bg:#e9f6ee; --pp-c-pos-ink:#327952;
  /* danger (delete account) */
  --pp-c-danger-line:#efc8c8; --pp-c-danger-bg:#fff8f8; --pp-c-danger-ink:#a83232;
  /* status inks/fills used by public pages (P0: light inks raised to WCAG AA on their badge fills) */
  --pp-c-ok-ink:#0b6b47;  --pp-c-ok-bg:rgba(77,237,170,.15);
  --pp-c-warn-ink:#7a4e06; --pp-c-warn-bg:rgba(251,191,36,.15);
  --pp-c-bad-ink:#a12a1d;  --pp-c-bad-bg:rgba(248,113,113,.15);
  --pp-c-note-bg:rgba(251,191,36,.08); --pp-c-note-line:rgba(251,191,36,.35);
  /* public disclaimer bar (a dark bar in both themes; P0: text was --text-dim #57705f = 3.5:1) */
  --pp-c-bar-bg:#04140c; --pp-c-bar-ink:#b5c9bf; --pp-c-bar-accent:#0f9d6e; --pp-c-bar-line:#234536;
  --pp-c-bar-soft-bg:#eef6f2;
  /* public callout boxes and placeholders */
  --pp-c-callout-bg:#f3faf7; --pp-c-callout-line:#cfe4dc;
  --pp-c-public-placeholder:#55705f;
  /* app dark-only overrides of the mobile Home card palette (batch2 / nr1 values) */
  --pp-c-home-card:#10241b; --pp-c-home-line:#2b4a3c; --pp-c-home-soft:#17301f; --pp-c-home-muted:#c3d6cc;
}

/* ---------- 2. Semantic tokens: dark ---------- */
html[data-theme="dark"]{
  --pp-c-shell:#10241b;
  --pp-c-shell-top:#10241b;
  --pp-c-surface:#17301f;          /* = desktop dark card (--panel-2) */
  --pp-c-surface-soft:#102319;     /* = desktop dark field (--surface-2) */
  --pp-c-field-strong:#102319;
  --pp-c-line:rgba(132,176,155,.24);
  --pp-c-line-2:rgba(132,176,155,.24);
  --pp-c-ink:#f5fbf8;
  --pp-c-muted:#c3d6cc;            /* 10.3:1 on the dark card; was #6c8279 = 2.9:1 */
  --pp-c-label:#c3d6cc;
  --pp-c-icon-dim:#a9c2b5;
  --pp-c-icon-dim-2:#a9c2b5;
  --pp-c-row-hover:rgba(132,176,155,.08);
  --pp-c-track:#1c3a2b;
  --pp-c-glass:rgba(23,48,31,.72);
  --pp-c-hero-glass:rgba(16,36,27,.94);
  --pp-c-header-bg:rgba(10,28,20,.88);
  --pp-c-sheet:rgba(23,48,31,.985);
  --pp-c-seg-bg:#102319;
  --pp-c-seg-ink:#d6e6dd;
  --pp-c-seg-active-bg:rgba(77,237,170,.16);
  --pp-c-seg-raised-bg:rgba(77,237,170,.16);
  --pp-c-nav-bg:rgba(10,28,20,.96);
  --pp-c-nav-ink:#c3d6cc;
  --pp-c-nav-ring:#10241b;
  --pp-c-tint-soft:rgba(77,237,170,.14);
  --pp-c-tint-soft-2:rgba(77,237,170,.14);
  --pp-c-tint-line:rgba(77,237,170,.28);
  --pp-c-tint-line-2:rgba(77,237,170,.28);
  --pp-c-tint-top:#153a2b;
  --pp-c-tint-top-2:#153a2b;
  --pp-c-tint-border:#2f5a47;
  --pp-c-tint-border-2:#2f5a47;
  --pp-c-progress-line:#2b4a3c;
  --pp-c-progress-bg:#17301f;
  --pp-c-identity-fill:#087d59;
  --pp-c-accent:#4dedaa; --pp-c-on-accent:#04140c; --pp-c-warn-soft-ink:#fcd34d;
  --pp-c-neg-bg:rgba(248,113,113,.08); --pp-c-neg-line:rgba(248,113,113,.32); --pp-c-neg-icon-bg:rgba(248,113,113,.14); --pp-c-neg-ink:#fca5a5;
  --pp-c-pos-bg:rgba(74,222,128,.07);  --pp-c-pos-line:rgba(74,222,128,.28);  --pp-c-pos-icon-bg:rgba(74,222,128,.14);  --pp-c-pos-ink:#86efac;
  --pp-c-danger-line:rgba(248,113,113,.38); --pp-c-danger-bg:rgba(248,113,113,.10); --pp-c-danger-ink:#fca5a5;
  --pp-c-ok-ink:#4dedaa;  --pp-c-ok-bg:rgba(77,237,170,.15);
  --pp-c-warn-ink:#fbbf24; --pp-c-warn-bg:rgba(251,191,36,.15);
  --pp-c-bad-ink:#fca5a5;  --pp-c-bad-bg:rgba(248,113,113,.15);
  --pp-c-note-bg:rgba(251,191,36,.08); --pp-c-note-line:rgba(251,191,36,.35);
  --pp-c-bar-bg:#04140c; --pp-c-bar-ink:#b5c9bf; --pp-c-bar-accent:#4dedaa; --pp-c-bar-line:#234536;
  --pp-c-bar-soft-bg:#102319;
  --pp-c-callout-bg:#153a2b; --pp-c-callout-line:#2f5a47;
  --pp-c-public-placeholder:#a9c2b5;
  --pp-c-home-card:#10241b; --pp-c-home-line:#2b4a3c; --pp-c-home-soft:#17301f; --pp-c-home-muted:#c3d6cc;
}

/* ---------- 3. App, dark, phones: point the vNext light token set at the dark tokens ----------
   app-vnext.css declares --pp-* (white cards, light fields, dark ink, grey muted) for <=700px in both
   themes. In dark these now resolve to the dark tokens, so cards, fields, headings and muted text follow
   the theme. --pp-green (button / tile FILL with white text) is deliberately left as is. */
@media(max-width:700px){
  html[data-theme="dark"]{
    --pp-shell:var(--pp-c-shell);
    --pp-surface:var(--pp-c-surface);
    --pp-surface-soft:var(--pp-c-surface-soft);
    --pp-line:var(--pp-c-line);
    --pp-ink:var(--pp-c-ink);
    --pp-muted:var(--pp-c-muted);
    --pp-green-dark:#4dedaa;
    --pp-green-soft:rgba(77,237,170,.16);
    --pp-shadow:0 10px 30px rgba(0,0,0,.28);
  }
}
/* Desktop (>=701px) has no vNext token set. A-036 rows use --pp-surface-soft for hover/press with a
   transparent fallback; give the desktop dark theme a dark value so hover/press never flashes light. */
@media(min-width:701px){
  html[data-theme="dark"] #app-shell{--pp-surface-soft:var(--pp-c-row-hover);}
}

/* Inventory identity card uses --pp-green-dark as a FILL under white text; in dark that token becomes
   the mint text green, so pin the fill to the deep green (same as light). */
@media (max-width:760px){
  html[data-theme="dark"] .inventory-identity{background:var(--pp-c-identity-fill);}
  html[data-theme="dark"] .inventory-identity .identity-round-action{color:var(--pp-c-identity-fill);}
}

/* ---------- 4. App, dark: small fixes that are not token-shaped ---------- */
/* Signed-out landing footer links had no colour rule (UA blue #0000ee on #10241b = 1.73:1). Dark only;
   light keeps its current look. */
html[data-theme="dark"] .public-footer-links a{color:var(--text-dim);}
html[data-theme="dark"] .public-footer-links a:hover{color:var(--primary);}
/* Danger pills / buttons on dark cards: #f87171 on the tinted fill was 3.72:1. */
html[data-theme="dark"] #app-shell .pill.bad{color:#fca5a5;}
html[data-theme="dark"] #app-shell #reset-data,html[data-theme="dark"] #app-shell #delete-account-btn{color:#fca5a5;}
/* Native pickers follow the theme. */
html[data-theme="dark"] select,html[data-theme="dark"] input[type=date],html[data-theme="dark"] input[type=time],html[data-theme="dark"] input[type=datetime-local]{color-scheme:dark;}

/* Overdue countdown: --red (#f87171) is 4.3:1 on the highlighted dark stat card; use the dark status red. */
html[data-theme="dark"] #app-shell .countdown-cell.overdue{color:var(--pp-c-bad-ink);}
/* Series-coloured chips (Levels / Progress / Health): the series colour stays on the dot, tint and border;
   the label is the dark ink so mid-tone series colours (e.g. #79aefc on its own tint, 4.0:1) stay AA. */
html[data-theme="dark"] #app-shell .chip.active[style*="color:"]{color:var(--pp-c-ink)!important;}

/* ---------- 5. Public pages (body:not(#app-shell)) ---------- */
/* P0, light: brand green used as TEXT on the light page was #0f9d6e (3.0-3.2:1). #0b7a55 is the
   green start/help/privacy already use (4.6-4.9:1). Fills (buttons) are already #0a7a57 via polish.css. */
body:not(#app-shell){--primary:#0b7a55;--green:#0b7a55;--public-primary:#0b7a55;}
/* Placeholders: polish.css reads --pp-c-public-placeholder (P0: was #6b8a7c = 3.4-3.8:1). */

/* P3, dark: public pages read the same dark palette as the app. Every public page names its colours
   --bg/--panel/--panel-2/--border/--text/--text-dim/--primary...; a few use --dim/--green/--ink/--red or
   --public-*. Redefine them on body, which wins over each page's inline :root. */
html[data-theme="dark"] body:not(#app-shell){
  --bg:#10241b; --panel:#17301f; --panel-2:#102319; --border:rgba(132,176,155,.32); --text:#f5fbf8; --text-dim:#c3d6cc;
  --primary:#4dedaa; --primary-dim:rgba(77,237,170,.16); --primary-ink:#04140c; --shadow:rgba(0,0,0,.32); --warn:#fbbf24;
  --dim:#c3d6cc; --green:#4dedaa; --ink:#04140c; --red:#fca5a5;
  --public-bg:#10241b; --public-panel:#17301f; --public-border:rgba(132,176,155,.32); --public-text:#f5fbf8; --public-dim:#c3d6cc; --public-primary:#4dedaa; --public-field:#102319;
  background:var(--bg); color:var(--text);
}
html[data-theme="dark"]{color-scheme:dark;}
/* Fills that were literal light colours on a few pages */
html[data-theme="dark"] body:not(#app-shell) :is(.price-card,.founder-card){background:linear-gradient(145deg,#17301f,#132a20);}
html[data-theme="dark"] body:not(#app-shell) .hero{background:linear-gradient(135deg,#153a2b,#10241b);}
html[data-theme="dark"] body:not(#app-shell) .source-card{background:#132a20;border-color:var(--border);}
html[data-theme="dark"] body:not(#app-shell) .notice{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.35);color:#fcd34d;}
html[data-theme="dark"] body:not(#app-shell) :is(.jump a,.age-gate-card,.age-gate-no,.signup-card form input[type=email],.signup-card form input[type=password],.row-grid input,input,select,textarea):not([type=checkbox]):not([type=radio]){background-color:var(--panel-2);color:var(--text);}
html[data-theme="dark"] body:not(#app-shell) .age-gate-card{background:var(--panel);}
html[data-theme="dark"] body:not(#app-shell) :is(.tag,.page-disclaimer,.page-disclaimer strong,.ref-caution){color:#fcd34d;}
html[data-theme="dark"] body:not(#app-shell) .disclaimer-bar{border-bottom-color:var(--pp-c-bar-line);}
/* Status colours that were already AA in light on a few pages (#8a5a08, #a72d2d, #c0392b, #0e6b46, #94620d)
   keep their light value; in dark they take the dark status inks. */
html[data-theme="dark"] body:not(#app-shell) :is(.pill.warn,.disclaimer-box b,.caution-box b){color:var(--pp-c-warn-ink);}
html[data-theme="dark"] body:not(#app-shell) :is(.pill.warn){background:var(--pp-c-warn-bg);}
html[data-theme="dark"] body:not(#app-shell) :is(.pill.bad,.warn-note,.error-note,.row-remove:hover,.syringe-caption .over-label){color:var(--pp-c-bad-ink);}
html[data-theme="dark"] body:not(#app-shell) .pill.bad{background:var(--pp-c-bad-bg);}
html[data-theme="dark"] body:not(#app-shell) .pill.ok{color:var(--pp-c-ok-ink);background:var(--pp-c-ok-bg);}
html[data-theme="dark"] body:not(#app-shell) :is(.disclaimer-box,.caution-box){background:var(--pp-c-note-bg);border-color:var(--pp-c-note-line);}
/* Pre-launch draft notes (.draft-banner, .nn) stay yellow paper with dark ink in both themes (already AA). */

/* Public secondary-button fill from polish.css stays mint in dark (deliberate design; 7.9:1). */
/* Primary CTAs: polish.css fills them #0a7a57 with --primary-ink text; in dark the ink is the dark
   on-mint ink, so the fill follows --primary (mint) too, as the app's dark primary buttons do (13:1). */
html[data-theme="dark"] body:not(#app-shell) .btn:not(.secondary):not(.ghost):not(.btn-secondary),
html[data-theme="dark"] body:not(#app-shell) .topbar-links a.cta,
html[data-theme="dark"] body:not(#app-shell) .links a.cta,
html[data-theme="dark"] body:not(#app-shell) button[type="submit"]{background-color:var(--primary);color:var(--primary-ink);}

/* ---------- 6. Print: always light, whatever the screen theme ---------- */
@media print{
  html[data-theme="dark"]{color-scheme:light;}
  html[data-theme="dark"] body:not(#app-shell){
    --bg:#ffffff; --panel:#ffffff; --panel-2:#ffffff; --border:#b7d0c1; --text:#122019; --text-dim:#4f6858;
    --primary:#0b7a55; --primary-dim:rgba(15,157,110,.12); --primary-ink:#ffffff; --dim:#4f6858; --green:#0b7a55; --ink:#ffffff; --red:#a12a1d;
    --public-bg:#ffffff; --public-panel:#ffffff; --public-border:#b7d0c1; --public-text:#122019; --public-dim:#4f6858; --public-primary:#0b7a55; --public-field:#ffffff;
    --pp-c-ok-ink:#0b6b47; --pp-c-warn-ink:#7a4e06; --pp-c-bad-ink:#a12a1d;
    background:#fff; color:#122019;
  }
  html[data-theme="dark"] body#app-shell{--bg:#ffffff;--panel:#ffffff;--panel-2:#ffffff;--text:#122019;--text-dim:#4f6858;--border:#d7e5dd;background:#fff!important;color:#122019;}
}

/* ---------- 7. Ref A-037/A-039: compliance text (age gate, disclaimers) >= 4.5:1 in both themes ---------- */
html[data-theme="dark"] body:not(#app-shell) .age-gate-yes{color:var(--primary-ink);}
html[data-theme="light"] #app-shell .disclaimer{color:#7a4e06;}
html[data-theme="light"] #app-shell :is(#tab-levels>div>.muted,#tab-labs>.card>p.muted){color:#4f6858;}
html[data-theme="light"] #app-shell .std-disclaimer{color:#3d5247;}
html[data-theme="light"] #app-shell .lab-context-note{color:#4f6858;}
html[data-theme="light"] #app-shell .activecycles-panel-group>p.muted:has(+#site-rotation-panel){color:#4f6858;}
@media (max-width:700px){html[data-theme="light"] #app-shell :is(.muted,.mobile-card-head p,.mobile-insight-copy em,.insights-vnext-hero p){color:#4f6858;}}
html[data-theme="light"] #app-shell .pill.ok{color:#0b6b47;}
html[data-theme="light"] #app-shell .pill.warn{color:#7a4e06;}
#app-shell .clinical-snapshot-sheet :is(.clinical-disclaimer,.clinical-inline-note,.clinical-meta,.clinical-key-value span,header p,th){color:#4f6858;}
html[data-theme="dark"] #app-shell .clinical-snapshot-sheet header{background:transparent;}
html[data-theme="dark"] #app-shell .clinical-snapshot-actions .btn.secondary{color:#065a41;background:#e2f5ec;}
html[data-theme="dark"] #app-shell .pp-chart.pp-surface-light{--pp-ink:#d6e6dd;--pp-ink-dim:#b3c7bd;}

/* ---------- 8. Ref A-037/A-039 P0 miss: method-list citations (light) ----------
   Pages set `.method-list cite{color:var(--text-dim);opacity:.8}`, 3.22:1 in light. Light public pages carry
   no data-theme, so drop the fade there only (--text-dim alone is AA); dark keeps opacity .8 unchanged. */
html:not([data-theme="dark"]) body:not(#app-shell) .method-list cite{opacity:1;}

/* ---------- 9. Found by the opacity-aware audit: dark deep-dive "Clear selection" (app.css fades it to .82) ----------
   4.24:1 on the dark deep-dive card at >=701px; drop the fade in dark only (light keeps .82, already AA). */
html[data-theme="dark"] #app-shell :is(#measurement-weight-chart [data-progress-deep-clear],#levels-deep-dive-workspace [data-levels-clear],#lab-compare-chart [data-lab-deep-clear]){opacity:1;}