/* ============================================================================
   ComeCome — LAGOON THEME (drop-in reskin)
   ----------------------------------------------------------------------------
   Re-skins the live ComeCome app (vanilla PHP/CSS) onto the "Lagoon" palette:
   bright teal #1FA4B5 (primary), deep teal #0F5563 (brand chrome), cool paper
   neutral surfaces, cool dark mode — keeping the pastel feedback family
   (leaf / honey / clay / sky) and Lexend + Atkinson Hyperlegible type.

   This SUPERSEDES the earlier warm refresh (tangerine/plum/oat): it is the same
   file at the same path, recolored. Drop it in and the whole app re-themes.

   INSTALL — one line, no markup changes. In includes/helpers.php → renderLayout(),
   keep this AFTER the existing custom.css link:

       <link rel="stylesheet" href="assets/css/custom.css">
       <link rel="stylesheet" href="assets/css/comecome-theme.css">   <!-- this file -->

   Self-contained (tokens + fonts inline), overrides custom.css by load order, so
   no class names in the PHP change. Light + dark both covered. Remove the line to
   revert. See the handover README for the (small) JS/manifest follow-ups.
   ============================================================================ */

/* Self-hosted fonts — offline-first and privacy-preserving (no third-party font
   CDN; previously loaded from Google Fonts, which leaked visitor IPs). woff2 live
   in assets/fonts/ and are precached by sw.js. Licenses: SIL OFL 1.1 —
   assets/fonts/Lexend-OFL.txt, assets/fonts/AtkinsonHyperlegible-OFL.txt. */
@font-face { font-family:"Lexend"; font-style:normal; font-weight:300; font-display:swap; src:url("../fonts/lexend-300.woff2") format("woff2"); }
@font-face { font-family:"Lexend"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/lexend-400.woff2") format("woff2"); }
@font-face { font-family:"Lexend"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/lexend-500.woff2") format("woff2"); }
@font-face { font-family:"Lexend"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/lexend-600.woff2") format("woff2"); }
@font-face { font-family:"Lexend"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/lexend-700.woff2") format("woff2"); }
@font-face { font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/atkinson-400.woff2") format("woff2"); }
@font-face { font-family:"Atkinson Hyperlegible"; font-style:italic; font-weight:400; font-display:swap; src:url("../fonts/atkinson-400-italic.woff2") format("woff2"); }
@font-face { font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/atkinson-700.woff2") format("woff2"); }
@font-face { font-family:"Atkinson Hyperlegible"; font-style:italic; font-weight:700; font-display:swap; src:url("../fonts/atkinson-700-italic.woff2") format("woff2"); }

/* ---- Tokens (subset needed by the live app) ---------------------------------- */
:root {
  color-scheme: light;  /* native <select> popup follows the theme */

  /* teal — primary / action / brand chrome */
  --teal-50:#DFF1F4; --teal-100:#BFE6EB; --teal-200:#93D6DE; --teal-300:#5FC2CE;
  --teal-500:#1FA4B5; --teal-600:#1A8A99; --teal-700:#136E7A; --teal-800:#0F5563; --teal-900:#0B333B;
  /* cool neutral — surfaces & borders */
  --cool-50:#F2F6F7; --cool-100:#E9F0F1; --cool-200:#DEE7E9; --cool-300:#C7D5D7;
  /* cool ink — text */
  --ink-900:#16252A; --ink-700:#415257; --ink-500:#6F8085; --ink-400:#90A0A4; --ink-300:#B0BEC1;
  /* pastel feedback — KEPT */
  --leaf-50:#ECF3E3; --leaf-500:#5E9A45; --leaf-600:#4C7E37; --leaf-700:#3A6128;
  --honey-100:#FBEACB; --honey-500:#E0A02E; --honey-700:#9E6F18;
  --clay-100:#F8DDD6; --clay-500:#CF5A41; --clay-700:#97351F;
  --sky-100:#DCEBF1; --sky-500:#4C8FA6; --sky-700:#2E6275;

  --cc-primary:var(--teal-500); --cc-primary-hover:var(--teal-600); --cc-primary-press:var(--teal-700);
  --cc-primary-soft:var(--teal-50); --cc-on-primary:#fff;
  --cc-brand:var(--teal-800); --cc-on-brand:#EAF7F9;
  --cc-success:var(--leaf-500); --cc-success-soft:var(--leaf-50);
  --cc-favorite:var(--honey-500); --cc-favorite-soft:var(--honey-100);
  --cc-danger:var(--clay-500);
  --cc-surface-app:var(--cool-50); --cc-surface-card:#fff; --cc-surface-sunken:var(--cool-100);
  --cc-text-strong:var(--ink-900); --cc-text-body:var(--ink-700); --cc-text-muted:var(--ink-500);
  --cc-border:var(--cool-200); --cc-border-strong:var(--cool-300);
  --cc-select-fill:var(--teal-50); --cc-ring:var(--teal-500);

  --cc-radius-md:0.875rem; --cc-radius-lg:1.25rem; --cc-radius-xl:1.75rem;
  --cc-shadow-sm:0 1px 2px rgba(16,40,46,.06),0 1px 3px rgba(16,40,46,.05);
  --cc-shadow-md:0 2px 6px rgba(16,40,46,.07),0 4px 12px rgba(16,40,46,.06);
  --cc-spring:cubic-bezier(0.34,1.4,0.64,1);
  /* teal glow used on hover/selection (rgb of #1FA4B5 = 31,164,181) */
  --cc-glow:31,164,181;

  --cc-font-display:"Lexend",system-ui,-apple-system,sans-serif;
  --cc-font-body:"Atkinson Hyperlegible","Lexend",system-ui,sans-serif;

  /* Retarget the base framework's legacy green --primary (assets/css/pico.min.css
     sets --primary:#4CAF50; it styles every <button> as background:var(--primary)).
     Remap to the Lagoon teal so ANY unstyled framework button/link/focus is on-brand
     instead of green — the root fix behind the food-card-hover patch. Late-bound via
     var(--cc-primary)/(--cc-primary-hover), so it follows light & dark automatically. */
  --primary: var(--cc-primary);
  --primary-hover: var(--cc-primary-hover);
}

/* ---- Typography -------------------------------------------------------------- */
body { font-family: var(--cc-font-body); color: var(--cc-text-body); }
h1, h2, h3, h4, h5, .child-nav h1, .nav-brand h1 { font-family: var(--cc-font-display); }

/* Native <select> popup — theme the option list for dark-mode contrast */
select option, select optgroup { background-color: var(--cc-surface-card); color: var(--cc-text-strong); }

/* ============================================================================
   LOGIN  (was: animated purple→pink gradient)
   ============================================================================ */
.login-container {
  background: var(--cc-surface-app) !important;
  animation: none !important;
}
.login-card {
  border-radius: var(--cc-radius-xl);
  box-shadow: var(--cc-shadow-md), 0 0 0 1px var(--cc-border);
}
.user-card { border-color: var(--cc-border); border-radius: var(--cc-radius-lg); }
.user-card:hover { border-color: var(--cc-ring); box-shadow: 0 8px 25px rgba(var(--cc-glow),.15); }
.user-card input[type="radio"]:checked + .user-avatar { border-color: var(--cc-ring); background: var(--cc-select-fill); }
.user-card input[type="radio"]:checked ~ .user-name { color: var(--cc-primary-press); }
.user-card:hover .user-avatar { border-color: var(--cc-ring); }
.error-message { background: var(--clay-100); color: var(--clay-700); border-left-color: var(--cc-danger); border-radius: var(--cc-radius-md); }

/* ============================================================================
   CHILD SHELL  (was: purple gradient nav, lavender bg)
   ============================================================================ */
.child-interface { background: var(--cc-surface-app); overflow-x: clip; }
.child-nav {
  background: var(--cc-brand) !important;
  color: var(--cc-on-brand);
  box-shadow: var(--cc-shadow-sm);
  gap: 0.5rem;
  overflow: visible;
}
.child-nav::after { display: none !important; }            /* drop the shimmer overlay */
.btn-back:hover, .btn-logout:hover { background: rgba(255,255,255,.16); }
/* Keep the nav controls from flex-shrinking — otherwise the logout clips at the edge. */
.child-nav .btn-back, .child-nav .btn-logout { flex: 0 0 auto; }
/* Theme toggle = a real 44px circle (a min-height touch-target floor in custom.css
   otherwise fights the 32px width and renders a vertical oval). */
.child-nav .theme-toggle {
  background: rgba(255,255,255,.16);
  flex: 0 0 auto;
  width: 2.75rem; height: 2.75rem;
  min-width: 2.75rem; min-height: 2.75rem;
  padding: 0; border-radius: 50%;
}
.streak-badge {
  background: var(--cc-favorite-soft); color: var(--honey-700);
  border: 2px solid var(--cc-favorite);
}

.child-footer { background: var(--cc-surface-card); border-top: 2px solid var(--cc-border); }
.footer-btn { color: var(--cc-text-muted); border-radius: var(--cc-radius-md); }
.footer-btn.active {
  background: var(--cc-select-fill) !important;
  color: var(--cc-primary-press) !important;
}
.footer-btn.active::after { background: var(--cc-primary); }
.footer-btn:hover:not(.active) { background: var(--cc-surface-sunken); color: var(--cc-primary); }

/* ============================================================================
   MEAL + FOOD SELECTION  (was: green selection, purple ::before bar)
   ============================================================================ */
.meal-btn { border-color: var(--cc-border); border-radius: var(--cc-radius-lg); box-shadow: var(--cc-shadow-sm); }
.meal-btn::before { background: var(--cc-primary) !important; }
.meal-btn:hover, .meal-btn.active {
  border-color: var(--cc-ring) !important;
  background: var(--cc-select-fill) !important;
  box-shadow: 0 8px 25px rgba(var(--cc-glow),.15);
}
.meal-btn:hover::before, .meal-btn.active::before { background: var(--cc-primary) !important; }

.food-card { border-color: var(--cc-border); border-radius: var(--cc-radius-lg); box-shadow: var(--cc-shadow-sm); }
.food-card:hover { border-color: var(--cc-ring); box-shadow: 0 12px 30px rgba(var(--cc-glow),.15); }
/* .food-card is a <button>: Pico fills its hover/focus/active with the legacy green
   --primary (#4CAF50). The dark block already overrides this — cover light (and the
   focus/active states) too, with the teal select tint. Tokens keep it right in both modes. */
.food-card:hover, .food-card:focus, .food-card:active, .food-card:focus-visible {
  background: var(--cc-select-fill) !important; border-color: var(--cc-ring) !important;
}
/* …but a favorite keeps its honey tint even while hovered/focused. */
.food-card.is-favorite:hover, .food-card.is-favorite:focus, .food-card.is-favorite:active,
.food-card.favorite:hover, .food-card.favorite:focus, .food-card.favorite:active {
  background: var(--cc-favorite-soft) !important; border-color: var(--cc-favorite) !important;
}
.food-card.is-favorite, .food-card.favorite {
  border-color: var(--cc-favorite) !important;
  background: var(--cc-favorite-soft) !important;
}
.food-card.is-favorite::before { background: var(--cc-favorite) !important; }
.food-name { color: var(--cc-text-strong); }

/* ============================================================================
   PORTIONS / CHECK-IN  (was: green selection + green glow pulse)
   ============================================================================ */
.portion-btn { border-color: var(--cc-border); border-radius: var(--cc-radius-lg); color: var(--cc-text-strong); }
.portion-btn:hover {
  border-color: var(--cc-ring); background: var(--cc-select-fill);
  box-shadow: 0 8px 25px rgba(var(--cc-glow),.15);
}
.checkin-section { border-color: var(--cc-border); border-radius: var(--cc-radius-lg); box-shadow: var(--cc-shadow-sm); }
.face-option { border-color: var(--cc-border); border-radius: var(--cc-radius-lg); }
.face-option:hover { border-color: var(--cc-ring); box-shadow: 0 8px 20px rgba(var(--cc-glow),.15); }
.face-selected, .face-option:has(input:checked) {
  border-color: var(--cc-ring) !important;
  background: var(--cc-select-fill) !important;
  animation: none !important;                                /* remove green glowPulse */
}
.face-option input[type="radio"]:checked + .face-emoji + .face-label { color: var(--cc-primary-press); }
.option-card:has(input[type="radio"]:checked) { border-color: var(--cc-ring) !important; background: var(--cc-select-fill) !important; }

/* ============================================================================
   WEIGHT / HISTORY  (was: purple accents)
   ============================================================================ */
.weight-entry-section, .chart-container, .date-selector, .checkin-summary, .meal-group {
  border-color: var(--cc-border); border-radius: var(--cc-radius-lg);
}
.weight-unit, .weight-encouragement, .empty-state-text, .meal-group h4 { color: var(--cc-primary) !important; }
.weight-increase { color: var(--cc-success); }
.weight-decrease { color: var(--honey-700); }
.date-nav-btn { background: var(--cc-primary) !important; }
.date-nav-btn:hover { box-shadow: 0 4px 15px rgba(var(--cc-glow),.3); }
.food-entry:hover { background: var(--cc-surface-sunken); }

/* ============================================================================
   BUTTONS  (was: green primary, purple secondary)
   ============================================================================ */
.btn-primary {
  background: var(--cc-primary) !important;
  border-radius: var(--cc-radius-md);
  box-shadow: 0 4px 15px rgba(var(--cc-glow),.3);
}
.btn-primary:hover { background: var(--cc-primary-hover) !important; box-shadow: 0 8px 25px rgba(var(--cc-glow),.4); }
.btn-secondary { color: var(--cc-primary); border-color: var(--cc-primary); border-radius: var(--cc-radius-md); }
.btn-secondary:hover { background: var(--cc-primary); color: var(--cc-on-primary); }
.btn-danger { background: var(--cc-danger); border-color: var(--cc-danger); }
.btn-danger:hover { background: var(--clay-700); border-color: var(--clay-700); }
.btn-small { background: var(--cc-primary); border-radius: 0.5rem; }
.btn-small:hover { background: var(--cc-primary-hover); }

/* ---- Alerts ---- */
.alert-success { background: var(--cc-success-soft); color: var(--leaf-700); border-left-color: var(--cc-success); }
.alert-warning { background: var(--honey-100); color: var(--honey-700); border-left-color: var(--cc-favorite); }
.alert-error   { background: var(--clay-100); color: var(--clay-700); border-left-color: var(--cc-danger); }

/* ============================================================================
   SUCCESS DIALOG  (was: green message, purple encouragement, gold streak)
   ============================================================================ */
dialog { border-radius: var(--cc-radius-xl); box-shadow: 0 25px 80px rgba(16,40,46,.30); }
.success-message { color: var(--cc-success); }
.success-encouragement { color: var(--cc-primary); }
.success-streak { background: var(--cc-favorite-soft) !important; color: var(--honey-700); border: 2px solid var(--cc-favorite); }

/* ============================================================================
   CATEGORY TABS  (was: purple selection)
   ============================================================================ */
.category-tab { border-color: var(--cc-border); color: var(--cc-text-muted); }
.category-tab:hover, .category-tab.active {
  border-color: var(--cc-ring) !important;
  background: var(--cc-select-fill) !important;
  color: var(--cc-primary-press) !important;
}

/* ============================================================================
   GUARDIAN  (was: deep indigo #1a237e sidebar)
   ============================================================================ */
.guardian-nav { background: var(--cc-brand) !important; }
.nav-menu a:hover, .nav-menu a.active { background: rgba(255,255,255,.16); color: #fff; }
.guardian-interface h1 { color: var(--cc-brand) !important; }
.table-responsive th { background: var(--cc-surface-sunken); }
.table-responsive tr:hover { background: var(--cc-surface-sunken); }
.table-responsive code { background: var(--cc-surface-sunken); color: var(--cc-primary-press); }
.dashboard-section h2 { color: var(--cc-text-strong); }

/* ============================================================================
   GUARDIAN DASHBOARD — cards, grid & rhythm
   ----------------------------------------------------------------------------
   The live dashboard renders each block as a bare <section class="dashboard-
   section"> (heading + content) with NO container, so insights, charts and
   every table run together in one undifferentiated flat column. These rules —
   CSS only, no markup change — give the filter bar its own surface, turn every
   section into a calm card, constrain the reading width, and pair the two
   charts side-by-side so the whole page scans in clear, separated chunks.
   ============================================================================ */

/* Constrain + center the dashboard, and lay sections out on a 2-col grid.
   Scoped with :has(.dashboard-section) so the management pages (which share
   <main class="container">) are NOT forced onto the chart grid. */
.guardian-interface > main.container:has(.dashboard-section) {
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* single column — every card (incl. charts) stacks */
  gap: 1.25rem;
  align-content: start;
}
/* Page header, age line, filters and any loose paragraph span the full width */
.guardian-interface > main > h1,
.guardian-interface > main > .child-age,
.guardian-interface > main > .dashboard-filters,
.guardian-interface > main > p { grid-column: 1 / -1; }
.guardian-interface > main > h1 { margin-bottom: 0.25rem; }
.guardian-interface > main > .child-age { margin: 0 0 0.25rem !important; }

/* Filter bar → its own card surface */
.dashboard-filters {
  background: var(--cc-surface-card);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-shadow-sm);
  padding: 1.1rem 1.25rem;
  margin: 0.25rem 0 0;
  align-items: end;
}
.filter-group label { font-weight: 600; color: var(--cc-text-muted); display: block; margin-bottom: 0.4rem; }

/* Every section → a calm card (full width by default) */
.dashboard-section {
  grid-column: 1 / -1;
  margin: 0;
  background: var(--cc-surface-card);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-shadow-sm);
  padding: 1.35rem 1.5rem 1.5rem;
}
.dashboard-section h2 {
  font-family: var(--cc-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cc-text-strong) !important;
  margin: 0 0 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--cc-border);
}
.dashboard-section h4 { font-family: var(--cc-font-display); color: var(--cc-text-strong); }

/* Insights = the narrative summary → tint it so it reads as the lead card */
.dashboard-section:has(.insights-panel) {
  background: var(--cc-primary-soft);
  border-color: var(--cc-border-strong);
}
.insights-panel li { line-height: 1.5; }

/* Charts are full-width and stacked (side-by-side made them too cramped on mobile).
   Flatten the inner container so the canvas sits directly in the card (no double frame). */
.dashboard-section .chart-container {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Tables sit flush inside the card, framed once */
.dashboard-section .table-responsive {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  overflow: hidden;
}
.dashboard-section table { margin: 0; }
.dashboard-section .table-responsive th:first-child,
.dashboard-section .table-responsive td:first-child { padding-left: 1rem; }

/* ============================================================================
   GUARDIAN MANAGEMENT PAGES — same card approach
   ----------------------------------------------------------------------------
   Manage users / foods / meals / medications / sleep / logs, and Settings, all
   render stacked <section class="management-section"> blocks with NO container
   (only margin-bottom). Give them the SAME card treatment as the dashboard:
   each section becomes a calm card with a divider-underlined header, forms get
   breathing room, tables are framed once, and the column is constrained to a
   comfortable form-reading width (narrower than the data-dense dashboard).
   CSS only — no markup change. ========================================== */

.guardian-interface > main.container:has(.management-section) {
  max-width: 880px;
  margin-inline: auto;
}

/* Every management block → a card */
.management-section {
  margin: 0 0 1.25rem;
  background: var(--cc-surface-card);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-shadow-sm);
  padding: 1.35rem 1.5rem 1.5rem;
}
.management-section h2,
.management-section h3 {
  font-family: var(--cc-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cc-text-strong) !important;
  margin: 0 0 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--cc-border);
}

/* Forms inside cards: a touch more rhythm; primary action sits below the grid */
.management-section .form-grid { margin-bottom: 1.25rem; }
.management-section .form-grid label { font-weight: 600; color: var(--cc-text-body); }
.management-section .form-grid input,
.management-section .form-grid select { margin-top: 0.35rem; }

/* Settings checkbox rows: clearer, calmer spacing for each toggle + its hint */
.management-section > label { display: block; font-weight: 600; padding: 0.15rem 0; }
.management-section > small { color: var(--cc-text-muted); }

/* Tables sit flush inside the card, framed once */
.management-section .table-responsive {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  overflow: hidden;
}
.management-section table { margin: 0; }
.management-section .table-responsive th:first-child,
.management-section .table-responsive td:first-child { padding-left: 1rem; }

/* Row action buttons (edit / delete) keep a steady gap */
.management-section td .btn-small { margin-right: 0.35rem; }

/* Roster tables (manage-users): status pills, circular icon actions, dimmed inactive
   rows — toward the consolidated-roster mock. `.roster` + row/status class hooks are
   added in pages/guardian/manage-users.php; styling only, no logic change. */
.roster td:first-child { width: 1%; white-space: nowrap; padding-right: 0; }
.roster .status-badge {
  display: inline-block; padding: 0.18rem 0.65rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.roster .status-badge.is-on  { background: var(--cc-success-soft); color: var(--cc-success); }
.roster .status-badge.is-off { background: var(--cc-surface-sunken); color: var(--cc-text-muted); }
.roster tr.is-inactive { opacity: 0.6; }
.roster td .btn-small {
  width: 2.15rem; height: 2.15rem; min-width: 2.15rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 0.95rem; line-height: 1; text-decoration: none;
  border: 1px solid var(--cc-border); background: var(--cc-primary-soft); color: var(--cc-primary-press);
}
.roster td .btn-small:hover { background: var(--cc-select-fill); border-color: var(--cc-ring); }
.roster td .btn-small.btn-danger { background: var(--cc-surface-card); color: var(--cc-danger); border-color: var(--cc-danger); }
.roster td .btn-small.btn-danger:hover { background: var(--cc-danger); color: #fff; }

/* ---- Focus ring ---- */
:focus-visible { outline: 3px solid var(--cc-ring) !important; outline-offset: 2px; }

/* ============================================================================
   DARK MODE  (was: cold purple #1a1625 / #9575CD)
   Remap the app's dark surfaces + accents to the cool Lagoon dark theme.
   ============================================================================ */
[data-theme="dark"] {
  color-scheme: dark;  /* native dropdowns render dark in the app's dark mode */
  /* Remap custom.css's OWN dark variables → Lagoon palette. This single block
     reskins dozens of the app's dark rules that reference these vars
     (category tabs, secondary buttons, accents, surfaces, text). */
  --bg-primary:#0E1618; --bg-secondary:#172224; --bg-card:#172224;
  --text-primary:#E8F3F4; --text-secondary:#8FA3A5; --border-color:#253537;
  --accent-green:#7FB85F;
  --accent-purple:#3CC2D2; /* the old purple accent role becomes teal */

  --cc-surface-app:#0E1618; --cc-surface-card:#172224; --cc-surface-sunken:#121C1E;
  --cc-brand:#0B333B; --cc-on-brand:#DFF4F6;
  --cc-text-strong:#E8F3F4; --cc-text-body:#C9DADC; --cc-text-muted:#8FA3A5;
  --cc-border:#253537; --cc-border-strong:#314547;
  --cc-primary:#3CC2D2; --cc-primary-hover:#5BCEDB; --cc-primary-press:#1FA4B5;
  --cc-primary-soft:#0F2A2E; --cc-on-primary:#062328;
  --cc-success:#7FB85F; --cc-success-soft:#28311C;
  --cc-favorite:#E9B454; --cc-favorite-soft:#352B12;
  --cc-select-fill:#0F2A2E; --cc-ring:#3CC2D2;
  --cc-glow:60,194,210; /* rgb of #3CC2D2 for dark-mode glows */
}
[data-theme="dark"] .child-interface,
[data-theme="dark"] .guardian-interface > main { background: var(--cc-surface-app); color: var(--cc-text-body); }
[data-theme="dark"] .child-nav, [data-theme="dark"] .guardian-nav { background: var(--cc-brand) !important; }
[data-theme="dark"] .food-card, [data-theme="dark"] .meal-btn, [data-theme="dark"] .face-option,
[data-theme="dark"] .portion-btn, [data-theme="dark"] .option-card, [data-theme="dark"] .checkin-section,
[data-theme="dark"] .weight-entry-section, [data-theme="dark"] .chart-container, [data-theme="dark"] .meal-group,
[data-theme="dark"] .checkin-summary, [data-theme="dark"] .date-selector, [data-theme="dark"] .login-card,
[data-theme="dark"] .user-card, [data-theme="dark"] dialog {
  background: var(--cc-surface-card); border-color: var(--cc-border); color: var(--cc-text-body);
}
[data-theme="dark"] .login-container { background: var(--cc-surface-app) !important; }
[data-theme="dark"] .child-footer { background: var(--cc-surface-card); border-color: var(--cc-border); }
[data-theme="dark"] .footer-btn.active { background: var(--cc-select-fill) !important; color: var(--cc-primary) !important; }
[data-theme="dark"] .food-card:hover, [data-theme="dark"] .meal-btn:hover, [data-theme="dark"] .meal-btn.active,
[data-theme="dark"] .face-selected, [data-theme="dark"] .face-option:has(input:checked) {
  border-color: var(--cc-ring) !important; background: var(--cc-select-fill) !important;
}
[data-theme="dark"] .food-card.is-favorite, [data-theme="dark"] .food-card.favorite {
  border-color: var(--cc-favorite) !important; background: var(--cc-favorite-soft) !important;
}
[data-theme="dark"] .food-name, [data-theme="dark"] .meal-btn, [data-theme="dark"] .portion-btn { color: var(--cc-text-strong); }
[data-theme="dark"] .weight-unit, [data-theme="dark"] .meal-group h4,
[data-theme="dark"] .empty-state-text, [data-theme="dark"] .weight-encouragement,
[data-theme="dark"] .success-encouragement { color: var(--cc-primary) !important; }
[data-theme="dark"] .success-message { color: var(--cc-success); }
[data-theme="dark"] .guardian-interface h1 { color: var(--teal-100) !important; }
[data-theme="dark"] .table-responsive th { background: var(--cc-surface-card); color: var(--cc-text-strong); }

/* Category tabs + secondary button in dark use hardcoded purple rgba in custom.css */
[data-theme="dark"] .category-tab { background: var(--cc-surface-card); border-color: var(--cc-border); color: var(--cc-text-muted); }
[data-theme="dark"] .category-tab:hover,
[data-theme="dark"] .category-tab.active {
  border-color: var(--cc-ring) !important;
  background: var(--cc-select-fill) !important;
  color: var(--cc-primary) !important;
}
[data-theme="dark"] .btn-secondary { color: var(--cc-primary); border-color: var(--cc-primary); }
[data-theme="dark"] .btn-secondary:hover { background: var(--cc-primary); color: var(--cc-on-primary); }

/* Dark-mode legibility for the Phase-2 teal inline child-page text colors. custom.css's
   own dark overrides target the OLD Duolingo hexes; the inline hints use the brand
   (#0F5563) and primary (#1FA4B5) teals, which would read dark-on-dark on the cool dark
   surfaces. Re-assert contrast with light dark-mode teal tokens. */
[data-theme="dark"] .child-interface [style*="color:#0F5563"] { color: var(--teal-100) !important; }
[data-theme="dark"] .child-interface [style*="color:#1FA4B5"] { color: var(--cc-primary) !important; }

/* ---- Calmer motion: soften the spring + honour reduced-motion ---------------- */
.card-pop-in { animation-timing-function: var(--cc-spring) !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}