/* MUNO web app - design tokens
 * Flat day/night palette (photos removed). Light by day, dark by night.
 * Ink flips automatically with the theme. */
:root{
  /* accent - soft cerulean + sun-gold highlight (used sparingly) */
  --accent:#3E85D3; --accent-deep:#2C68AE; --accent-glow:#7FB0E6; --sun:#F3B24C;
  /* type */
  /* one face for the whole app - the same the mobile app has used since last year.
     Syne's default figures are proportional, so tabular-nums is switched on globally below:
     the face carries a tnum feature and with it the ten digits become equal width. */
  --font-display:'Syne',system-ui,sans-serif;
  --font-ui:'Syne',system-ui,sans-serif;
  --ls-word:.18em; --ls-label:.16em;
  /* glass geometry (colors come from the theme blocks below) */
  --glass-brd:0;
  --glass-shadow:0 6px 18px rgba(18,40,70,.07);
  /* the app stops growing at 1.5x a standard 1280 desktop; past that the sky takes the sides */
  --shell-max:1920px;
  --r-1:8px; --r-2:6px; --r-3:12px; --r-pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1); --t-fast:.15s; --t-med:.3s;

  /* default = light (day) */
  --ink:#131a22; --muted:#4a5663; --hairline:rgba(18,25,34,.12); --track:rgba(38,51,63,.16);
  /* The white border and the white hover come from the era when panels sat on a photograph.
     On today's near-white cards they are invisible, so a field or an unselected segment had no
     edge at all - the border is ink now, and hover darkens instead of brightening. */
  --surface:rgba(255,255,255,.62); --surface-brd:rgba(20,40,70,.18); --surface-hover:rgba(20,40,70,.06);
  --bg-top:#cfe0f2; --bg-bot:#f1f6fc;
  --glass-bg:rgba(255,255,255,.5);
  --glass-blur:blur(20px) saturate(135%) brightness(1.12);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.9),inset 1px 0 0 rgba(255,255,255,.4);
}

/* ---- DAY (light) ---- */
:root[data-theme="light"]{
  --ink:#131a22; --muted:#4a5663; --hairline:rgba(18,25,34,.12); --track:rgba(38,51,63,.16);
  /* A white fill with a white border was invisible on a near-white card: a field had no edge and
     no body. The fill is a faint ink tint now and the border is ink - the control reads as a
     control by its own shape, not by the light behind it. */
  --surface:rgba(22,44,74,.055); --surface-brd:rgba(20,40,70,.24); --surface-hover:rgba(20,40,70,.09);
  --bg-top:#cfe0f2; --bg-bot:#f1f6fc;
  --glass-bg:rgba(255,255,255,.5);
  --glass-blur:blur(20px) saturate(135%) brightness(1.12);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.9),inset 1px 0 0 rgba(255,255,255,.4);
  /* 16px offset + 44px blur pooled under the panels and stacked inside the 18px gaps,
     reading as a dark outline around the blocks and one dark plate beneath all three */
  --glass-shadow:0 6px 18px rgba(18,40,70,.07);
}

/* ---- NIGHT (dark) ---- */
:root[data-theme="dark"]{
  --ink:#eef2f7; --muted:#9aa7b5; --hairline:rgba(255,255,255,.13); --track:rgba(255,255,255,.24);
  /* the deep blue is a light-theme colour - on a dark panel it sinks into the background, so on
     dark it resolves to the lighter blue the buttons already use */
  --accent-deep:#7FB0E6;
  --surface:rgba(255,255,255,.09); --surface-brd:rgba(255,255,255,.2); --surface-hover:rgba(255,255,255,.16);
  --bg-top:#0f1826; --bg-bot:#1c2836;
  --glass-bg:rgba(255,255,255,.07);
  --glass-blur:blur(22px) saturate(125%) brightness(1.05);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.2),inset 1px 0 0 rgba(255,255,255,.08);
  /* dark theme: a heavy black drop shadow pools in the gaps between panels and reads
     as a separate dark plate under them - keep it minimal, the edge highlight carries separation */
  --glass-shadow:0 6px 18px rgba(0,0,0,.14);
}