/* ============================================================
   theme.css
   Colour tokens (light + dark) and global page reset.
   Everything else in the other CSS files reads from these
   custom properties, so this is the one file to touch for
   brand colour changes.

   Values follow the synappro design system (see project root:
   "synappro Design System.zip", tokens/colors.css) — canvas,
   ink and terracotta/sky steps are taken directly from there.
   Token *names* are kept as this app already had them (--bg,
   --text, --accent, ...) rather than renamed to the design
   system's own names, so nothing downstream had to change —
   only the values did. The --btn-glass-* tokens are new, used
   for the session view's buttons (see session.css).
   ============================================================ */

:root{
  --bg: #F5F6F9;          /* design system: --neutral-50 / canvas */
  --panel: #FFFFFF;        /* --neutral-0 */
  --text: #39393A;         /* --ink-900 */
  --muted: #55555A;        /* --ink-700, was a translucent ink tint — now the system's actual secondary-text step */
  --accent: #C6412A;       /* --terracotta-600, "the brand step" — 5:1 with white text, safe for button labels. JS (theme.js) overrides this per warm/cool + light/dark, see config.js: ACCENTS */
  --pill-bg: rgba(255,255,255,0.82);
  --card-border: #DFE2EA;  /* --border-hairline / --neutral-200 */
  --btn-border: #DFE2EA;
  --btn-hover: #ECEEF3;    /* --neutral-100 */
  --font: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* frosted-glass button chrome — design system's --glass-fill/--glass-tint/
     --glass-border/--shadow-glass, renamed with a btn- prefix so nothing
     stays distinct from the app's own surface tokens (css/app.css) */
  --btn-glass-fill: rgba(245,246,249,0.55);
  --btn-glass-fill-hover: rgba(245,246,249,0.76);
  --btn-glass-tint: linear-gradient(150deg, rgba(255,255,255,0.50) 0%, rgba(236,238,243,0.22) 48%, rgba(255,255,255,0.34) 100%);
  --btn-glass-border: rgba(255,255,255,0.70);
  --btn-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.42), inset 0 0 22px rgba(255,255,255,0.22), 0 12px 36px hsl(220 18% 55% / 0.20);

  /* the volume sliders' unfilled track — needs real contrast against the
     canvas/glass, unlike --btn-glass-border (a near-white edge highlight,
     easy to lose against a light background) */
  --slider-track-empty: #C7CCD8; /* design system: --neutral-300 / --border-strong */
}

/* #session.dark-ground: a session whose visual brings its own dark
   background in light mode (config.js: VISUAL_PALETTES, toggled in
   session.js: resetVisualState) takes the dark token set for its own
   subtree, so its buttons, pills and text read against that ground */
html.dark,
#session.dark-ground{
  --bg: #1D1D1E;
  --panel: #2A2A2C;
  --text: #FFFFF8;
  --muted: rgba(255,255,248,0.45);
  --pill-bg: rgba(58,58,60,0.88);
  --card-border: rgba(255,255,248,0.12);
  --btn-border: rgba(255,255,248,0.14);
  --btn-hover: #333335;

  --btn-glass-fill: rgba(57,57,58,0.50);
  --btn-glass-fill-hover: rgba(57,57,58,0.66);
  --btn-glass-tint: linear-gradient(150deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 48%, rgba(255,255,255,0.09) 100%);
  --btn-glass-border: rgba(255,255,255,0.20);
  --btn-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(255,255,255,0.10), 0 16px 44px rgba(0,0,0,0.32);

  --slider-track-empty: rgba(255,255,248,0.28);
}

html{ transition: background .3s ease; }

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0; height:100%; width:100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font);
  overflow-x: hidden; overflow-y: auto; /* vertical scroll is a safety net for short viewports (e.g. small phones) where the setup screen's content is taller than the window — #session is position:fixed/inset:0 so it's unaffected either way */
  transition: background .3s ease, color .3s ease;
}

button{ font-family: inherit; cursor:pointer; }