/* Daylight tokens for the storefront pages that share the pack/account colour
   set. The home, library and asset pages carry their own copy of this block;
   these pages had the day/night toggle in the nav drawer but no daylight
   stylesheet at all, so the toggle did nothing and a daytime visitor got a
   dark page in the middle of a light site.

   Same brand with the lights on: violet ink on lavender paper. No teal accent
   in daylight, and lime only ever as a badge fill, never as ink: #c8f56a on
   white paper is unreadable. */
:root[data-theme="day"] {
  --bg: #f4f2fb;
  --panel: #ffffff;
  --panel-strong: #eeeafb;
  --panel2: #eeeafb;
  --ink: #171034;
  --muted: #5f5880;
  --faint: #6f6890;
  --line: rgba(23,16,52,.13);
  --violet: #6d3ff2;
  --teal: #6d3ff2;
  --danger: #c0264a;
  --shadow: 0 14px 34px rgba(40,24,92,.13);
  --cta-bg: linear-gradient(120deg, #8b5cff, #6027e6);
}
:root[data-theme="day"] body {
  background: radial-gradient(900px 560px at 82% -8%, rgba(124,77,255,.13), transparent 62%), var(--bg);
  color: var(--ink);
}
/* the lime CTA is a night-time signature. on paper it becomes the violet ramp
   the home and library pages already use. */
:root[data-theme="day"] .btn.primary { background: linear-gradient(120deg, #8b5cff, #6027e6); color: #fff; }
:root[data-theme="day"] .btn { background: var(--panel); color: var(--ink); }
:root[data-theme="day"] .btn.primary:hover { color: #fff; }

/* text colours that were written light because the page was always dark */
:root[data-theme="day"] .hero-meta span,
:root[data-theme="day"] .check-row,
:root[data-theme="day"] .includes li,
:root[data-theme="day"] .success p,
:root[data-theme="day"] .credit span { color: var(--muted); }
:root[data-theme="day"] .success strong,
:root[data-theme="day"] .credit b { color: #5326d6; }
:root[data-theme="day"] .badge { color: #5326d6; border-color: rgba(109,63,242,.32); background: rgba(109,63,242,.08); }
:root[data-theme="day"] .badge::before { background: #6d3ff2; box-shadow: 0 0 14px rgba(109,63,242,.5); }
:root[data-theme="day"] .selection-tray { border-color: rgba(109,63,242,.3); background: var(--panel); }
:root[data-theme="day"] .cover-shell { background: linear-gradient(150deg, rgba(124,77,255,.16), rgba(109,63,242,.06)); }
:root[data-theme="day"] .eyebrow { color: var(--muted); }
:root[data-theme="day"] .input, :root[data-theme="day"] .text-input { background: #fff; color: var(--ink); }