/* neurocraft-lumio.theme.css -- PARALLEL theme (token delta only).
   Loaded LAST, after neurocraft.theme.css, by Implementations/demo-lumio.html.
   The original neurocraft.theme.css is untouched; demo.html keeps its look.
   Fonts come from a <link> in demo-lumio.html (no @import -- a leading @import
   inside a <link>ed sheet is fragile and silently dropped the rules below it).

   designCore note: NeuroCraft predates the --hp-* system and grew its own
   --nc- token layer plus a thick .nc- !important sheet. Those rules read the
   ui-radius and nc- vars, so re-skinning is just tuning BOTH token layers here
   -- no !important fights, no structural CSS. Folding the nc- layer into the
   hp- and ui- layers is the eventual refactor (logged, not done). */

:root {
  /* --hp-* knobs: the anti-vanilla delta (reaches every stock ui surface) */
  --hp-font-stack-baloo: "Baloo 2", "Quicksand", system-ui, sans-serif;
  --hp-font-heading: var(--hp-font-stack-baloo);
  --hp-font-body:    var(--hp-font-stack-nunito);
  --hp-weight-heading: 800;
  --hp-weight-body:    400;   /* normal reading weight — prominent text uses explicit ui-font-bold/semibold */
  --hp-text-scale: 1.0;          /* up from 0.82 -- readable for a young learner */
  --hp-corner-scale: 2.2;        /* up from 0 -- .nc-* rules read var(--ui-radius-*) */
  --hp-shadow-intensity: 0.10;   /* soft */
  --hp-hue-1: 152;
  --hp-sat-1: 56%;               /* green brand */
  --hp-hue-success: 152;

  /* NeuroCraft's own token layer: warm the canvas its .nc-* rules drive */
  --nc-canvas:   #f6f1e7;        /* was #ffffff */
  --nc-canvas-2: #efe7d6;
  --nc-ink:      #2b2a26;
  --nc-ink-soft: #7a756b;
  --nc-edge:     #e9ddc8;

  /* stock ui neutrals (the honest exception: canvas hue != primary hue) */
  --ui-bg:        #f6f1e7;
  --ui-bg-elev:   #ffffff;
  --ui-bg-sunken: #efe7d6;
  --ui-border:    #ebe0cc;
}

/* Existing theme hardcodes body { font-family:'Lexend' }; this loads after it
   (equal specificity, later wins) to adopt the friendly body voice. */
body { font-family: var(--hp-font-body); letter-spacing: 0; }

/* ── v2 shell chrome (2026-07-25, Mockups/nc-day-mockup-v2.html) ──────────
   The mockup's quiet dark bar + centered segmented pills, applied to the
   stock uiPageFrame DOM. Values live here as theme tokens (this file IS the
   token layer); components stay token-driven. */
:root {
  --nc-chrome:      #101318;
  --nc-chrome-2:    #161a21;
  --nc-chrome-text: #ccd2dc;
  --nc-chrome-dim:  #7d8595;
  --nc-chrome-line: rgba(255, 255, 255, 0.08);
}

.ui-pageframe-header {
  background: linear-gradient(180deg, var(--nc-chrome-2), var(--nc-chrome));
  border-bottom: 1px solid var(--nc-chrome-line);
  min-height: 52px;
  padding-top: 0; padding-bottom: 0;
  align-items: center;
}
.ui-pageframe-brand .ui-pageframe-title { color: #e9ecf2; font-family: var(--hp-font-heading); font-size: var(--ui-text-base); }
.ui-pageframe-brand .ui-pageframe-subtitle { display: none; }   /* one calm line */

/* Centered segmented pill nav — text-only (icons off), white pill = active. */
.ui-pageframe-tabs {
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--ui-radius-full);
  padding: 3px;
  gap: 2px;
}
.ui-pageframe-tabs .ui-tabs-head {
  border: 0; border-bottom: 0; margin-bottom: 0;
  border-radius: var(--ui-radius-full);
  padding: 6px 16px;
  color: var(--nc-chrome-dim);
  font-weight: var(--ui-font-semibold);
  font-size: var(--ui-text-sm);
  transition: all 0.18s ease;
}
.ui-pageframe-tabs .ui-tabs-head .fa { display: none; }
.ui-pageframe-tabs .ui-tabs-head:hover { color: #e9ecf2; background: transparent; }
.ui-pageframe-tabs .ui-tabs-head.ui-active { background: #ffffff; color: #111111; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); border-bottom: 0; }

.ui-pageframe-actions { color: var(--nc-chrome-text); }
.ui-pageframe-actions button, .ui-pageframe-actions .fa { color: var(--nc-chrome-text); }
.ui-pageframe-burger { color: var(--nc-chrome-text); }

/* The mockup has no footer — the chrome bar and the canvas are the page. */
.ui-pageframe-footer { display: none; }

/* One calm centered column — the mockup's canvas (stages, not the chrome). */
.ui-pageframe-stage, .ui-pageframe-body { max-width: 940px; margin-inline: auto; width: 100%; }

/* Day | Plan facet toggle — the mockup's segmented pill, on-canvas variant. */
.nc-facet-toggle { display: inline-flex; gap: 2px; background: rgba(90, 75, 45, 0.08); border-radius: var(--ui-radius-full); padding: 3px; }
.nc-facet-btn { border-radius: var(--ui-radius-full); padding: 5px 14px; font-size: var(--ui-text-sm); font-weight: var(--ui-font-semibold); color: var(--nc-ink-soft); cursor: pointer; transition: all 0.18s ease; user-select: none; }
.nc-facet-btn:hover { color: var(--nc-ink); }
.nc-facet-btn.on { background: #ffffff; color: var(--nc-ink); box-shadow: var(--ui-shadow-sm); }