/* ============================================================
   nuz.pet — the DARK theme, one source (2026-10-09)
   ------------------------------------------------------------
   Values are the design system's dark set (nuz.pet tokens.json v2).
   Loaded first on the onboarding (start), the hub (home) and every
   module built on css/module.css. Light-theme pages (css/site.css)
   do not load this file. Fonts: the page links Google Fonts itself
   (Bowlby One + DM Sans; Gaegu only on start/home) — see the module template.
   Rules of the set: `brand` is the only brand hue used as text;
   `action` fills the primary button and text on it is `on-action`;
   `cool` → `action` is the one progress gradient; cat / dog tag
   species content only. Hero headlines in Bowlby One may take the
   icon gradient (g-start → g-mid → g-end) at 32px+.
   ============================================================ */

:root {
  --ground:  #0e0f14;  /* page */
  --surface: #17181f;  /* cards, panels, inputs */
  --border:  #2a2b36;  /* card/chip borders, dividers, empty progress track (decorative) */
  --ink:     #e8e2f0;  /* headings + body — 15:1 */
  --muted:   #aaa4b8;  /* secondary text — 8:1 */
  --brand:   #bc9aee;  /* lavender: links, nav, outline buttons, meaningful icons — 9:1 */
  --action:  #fdb59f;  /* peach: primary button fill, progress end */
  --on-action: #16121f;/* text on action / on the action gradient — 7.9:1 on lavender, 12.5:1 on sky, 10.8:1 on peach */
  --cool:    #72e5f8;  /* sky: gradient / progress start. never text */
  --g-start: #bc9aee; --g-mid: #72e5f8; --g-end: #fdb59f;              /* the icon strokes, left → right */
  /* 2026-10-21: primary fill + selected ring = the Nuz wordmark gradient (no more solid peach). --action stays = g-end for old callers. */
  --action-grad: linear-gradient(90deg, var(--g-start) 0%, var(--g-mid) 50%, var(--g-end) 100%);
  --action-glow: 0 6px 20px -8px color-mix(in oklab, var(--g-start) 70%, transparent), 0 8px 24px -12px color-mix(in oklab, var(--g-mid) 60%, transparent);
  --action-solid: var(--g-start); /* where one colour is needed (focus rings, dots, range thumbs) */
  --g-start-deep: #5a44a6; --g-mid-deep: #22617f; --g-end-deep: #a9502c; /* same hues, deep enough to carry ink */
  --dog: #4d84f1;  --dog-tint: #111a33;
  --cat: #fc8f2d;  --cat-tint: #2a1c12;

  --font-display: "Bowlby One", system-ui, sans-serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-hand: "Gaegu", "Comic Sans MS", cursive; /* onboarding captions only */

  --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--ground); color: var(--ink); }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

/* the icon gradient as a room wash: lavender top-left, sky centre, peach bottom-right — quiet, behind everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 55% at 0% 0%,     color-mix(in oklab, var(--g-start) 38%, transparent), transparent 70%),
    radial-gradient(55% 50% at 55% 50%,   color-mix(in oklab, var(--g-mid) 14%, transparent), transparent 70%),
    radial-gradient(70% 60% at 100% 100%, color-mix(in oklab, var(--g-end) 34%, transparent), transparent 70%);
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }