/* Light and dark, as two sets of values for the same names.
 *
 * Every stylesheet the signed-in app and its public pages share paints with the
 * custom properties below instead of colour literals, so a theme is nothing but
 * a different value for each name: dark is the default and is exactly what the
 * app looked like before it had a second theme; light is what
 * html[data-theme="light"] swaps in.  static/js/theme.js sets that attribute in
 * <head>, before the first paint, from the visitor's stored choice or failing
 * that the operating system's.
 *
 * The names describe the role a colour plays in the *dark* design — fg-strong
 * is the brightest text, bg-inset the well an input sits in, bd a hairline —
 * because that is the design they were lifted out of.  Two groups of colour are
 * deliberately NOT here and stay literals where they are used:
 *
 *   - accent surfaces: a steelblue button with white text, a red "danger"
 *     button, the calendar's event chips, chart segments and status dots.  They
 *     read the same on either background, and a token for them would be one
 *     more name with the same value twice;
 *   - translucent tints (rgba(248,113,113,.12) behind a red badge, …), which
 *     are already relative to whatever is behind them.
 *
 * So a new rule that uses one of the neutral literals above should use the
 * token instead — otherwise it is dark in both themes.  The landing page
 * (showcase) loads this file for the tokens nav-menu.css needs but not
 * theme.js, so it never gets the attribute and stays dark by design.
 */

:root {
  color-scheme: dark;
  --color-scheme: dark;

  --bg-page: #0f172a;

  --bg-amber-badge: #713f12;
  --bg-blue-deep: #1e3a5f;
  --bg-deep: #111827;
  --bg-deep-2: #111c30;
  --bg-deep-3: #0d1528;
  --bg-deep-4: #0d1525;
  --bg-green-badge: #14532d;
  --bg-green-deep: #10221a;
  --bg-green-deep-2: #1a3a1a;
  --bg-hover: #273549;
  --bg-hover-2: #263244;
  --bg-indigo-deep: #21325e;
  --bg-inset: #0f172a;
  --bg-inset-a50: rgba(15,23,42,0.5);
  --bg-inset-a55: rgba(15,23,42,0.55);
  --bg-inset-a60: rgba(15,23,42,0.6);
  --bg-raised: #334155;
  --bg-red-dark: #7f1d1d;
  --bg-red-deep: #1f1315;
  --bg-red-deep-2: #2a1215;
  --bg-red-deep-3: #3f1d1d;
  --bg-screen: #0b1220;
  --bg-selected: #1a2740;
  --bg-sheen: rgba(255,255,255,0.018);
  --bg-sheen-2: rgba(255,255,255,0.03);
  --bg-sky-deep: #0b1e30;
  --bg-sky-deep-2: #0c2a40;
  --bg-steel-deep: #24405f;
  --bg-strong: #475569;
  --bg-panel: #1e293b;

  --fg: #e2e8f0;
  --fg-amber: #fbbf24;
  --fg-amber-pale: #fde68a;
  --fg-amber-soft: #fcd34d;
  --fg-blue: #60a5fa;
  --fg-blue-soft: #93c5fd;
  --fg-dim: #475569;
  --fg-emerald: #34d399;
  --fg-faint: #8b9cb3;
  --fg-green: #4ade80;
  --fg-green-strong: #22c55e;
  --fg-green-soft: #86efac;
  --fg-indigo: #c7d2fe;
  --fg-max: #ffffff;
  --fg-mint: #7dd3a0;
  --fg-muted: #94a3b8;
  --fg-orange: #f59e0b;
  --fg-orange-soft: #fb923c;
  --fg-red: #f87171;
  --fg-red-pale: #fecaca;
  --fg-red-soft: #fca5a5;
  --fg-red-strong: #ef4444;
  --fg-sky: #38bdf8;
  --fg-sky-soft: #7dd3fc;
  --fg-skyblue: skyblue;
  --fg-soft: #cbd5e1;
  --fg-steel: steelblue;
  --fg-steel-soft: #7fb3d5;
  --fg-strong: #f1f5f9;
  --fg-subtle: #64748b;
  --fg-violet: #c4b5fd;
  --fg-yellow: #eab308;
  --fg-yellow-soft: #facc15;

  --bd: #334155;
  --bd-amber-dark: #92400e;
  --bd-blue-dark: #1e40af;
  --bd-deep: #0f172a;
  --bd-faint: #8b9cb3;
  --bd-green-dark: #245c40;
  --bd-indigo-dark: #243a63;
  --bd-red-dark: #7f1d1d;
  --bd-soft: #1e293b;
  --bd-soft-2: #263244;
  --bd-soft-3: #263347;
  --bd-soft-4: #16233a;
  --bd-soft-5: #1e2e45;
  --bd-strong: #475569;

  --shadow-25: rgba(0,0,0,0.25);
  --shadow-35: rgba(0,0,0,0.35);
  --shadow-40: rgba(0,0,0,0.4);
  --shadow-50: rgba(0,0,0,0.5);
  --shadow-deep: rgba(2,6,23,0.55);

  --overlay: rgba(0,0,0,0.6);
  --overlay-55: rgba(0,0,0,0.55);
  --overlay-deep: rgba(2,6,23,0.75);
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-scheme: light;

  --bg-page: #eef2f6;

  --bg-amber-badge: #fef3c7;
  --bg-blue-deep: #dbeafe;
  --bg-deep: #f8fafc;
  --bg-deep-2: #f5f8fb;
  --bg-deep-3: #f8fafc;
  --bg-deep-4: #f8fafc;
  --bg-green-badge: #dcfce7;
  --bg-green-deep: #f0fdf4;
  --bg-green-deep-2: #dcfce7;
  --bg-hover: #eef2f7;
  --bg-hover-2: #f1f5f9;
  --bg-indigo-deep: #e0e7ff;
  --bg-inset: #f8fafc;
  --bg-inset-a50: rgba(241,245,249,.7);
  --bg-inset-a55: rgba(241,245,249,.75);
  --bg-inset-a60: rgba(241,245,249,.8);
  --bg-raised: #e2e8f0;
  --bg-red-dark: #fee2e2;
  --bg-red-deep: #fef2f2;
  --bg-red-deep-2: #fee2e2;
  --bg-red-deep-3: #fee2e2;
  --bg-screen: #e2e8f0;
  --bg-selected: #e0f2fe;
  --bg-sheen: rgba(15,23,42,.018);
  --bg-sheen-2: rgba(15,23,42,.03);
  --bg-sky-deep: #e0f2fe;
  --bg-sky-deep-2: #e0f2fe;
  --bg-steel-deep: #dbeafe;
  --bg-strong: #cbd5e1;
  --bg-panel: #ffffff;

  --fg: #1e293b;
  --fg-amber: #b45309;
  --fg-amber-pale: #92400e;
  --fg-amber-soft: #b45309;
  --fg-blue: #2563eb;
  --fg-blue-soft: #1d4ed8;
  --fg-dim: #94a3b8;
  --fg-emerald: #047857;
  --fg-faint: #56657a;
  --fg-green: #15803d;
  --fg-green-strong: #16a34a;
  --fg-green-soft: #166534;
  --fg-indigo: #4338ca;
  --fg-max: #0f172a;
  --fg-mint: #15803d;
  --fg-muted: #475569;
  --fg-orange: #b45309;
  --fg-orange-soft: #ea580c;
  --fg-red: #dc2626;
  --fg-red-pale: #991b1b;
  --fg-red-soft: #b91c1c;
  --fg-red-strong: #dc2626;
  --fg-sky: #0284c7;
  --fg-sky-soft: #0369a1;
  --fg-skyblue: #2f6f9f;
  --fg-soft: #334155;
  --fg-steel: #3a6e99;
  --fg-steel-soft: #36648b;
  --fg-strong: #0f172a;
  --fg-subtle: #64748b;
  --fg-violet: #6d28d9;
  --fg-yellow: #a16207;
  --fg-yellow-soft: #ca8a04;

  --bd: #cbd5e1;
  --bd-amber-dark: #fcd34d;
  --bd-blue-dark: #93c5fd;
  --bd-deep: #e2e8f0;
  --bd-faint: #94a3b8;
  --bd-green-dark: #86efac;
  --bd-indigo-dark: #a5b4fc;
  --bd-red-dark: #fca5a5;
  --bd-soft: #e2e8f0;
  --bd-soft-2: #e2e8f0;
  --bd-soft-3: #e2e8f0;
  --bd-soft-4: #e2e8f0;
  --bd-soft-5: #dbe3ec;
  --bd-strong: #94a3b8;

  --shadow-25: rgba(15,23,42,.08);
  --shadow-35: rgba(15,23,42,.12);
  --shadow-40: rgba(15,23,42,.14);
  --shadow-50: rgba(15,23,42,.16);
  --shadow-deep: rgba(15,23,42,.15);

  --overlay: rgba(15,23,42,.45);
  --overlay-55: rgba(15,23,42,.4);
  --overlay-deep: rgba(15,23,42,.5);
}

/* ── The switch ─────────────────────────────────────────────────────────────
 *
 * Sits immediately left of the language switcher and is sized to it.  Class
 * selectors on purpose, for the same reason as .nav-toggle in nav-menu.css:
 * `nav button` paints every button in the bar steelblue, and this one should
 * read as a control, not as a second Sign out. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  vertical-align: middle;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-panel);
  border: 1px solid var(--bd-faint);
  border-radius: 6px;
  color: var(--fg-muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.theme-toggle:hover {
  background: var(--bg-panel);
  border-color: steelblue;
  color: var(--fg-strong);
}

.theme-toggle:focus-visible {
  outline: 2px solid steelblue;
  outline-offset: 2px;
}

.theme-toggle-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The icon is the theme a click takes you to: a sun while it is dark, a moon
   while it is light. */
.theme-toggle-moon { display: none; }
:root[data-theme="light"] .theme-toggle-sun { display: none; }
:root[data-theme="light"] .theme-toggle-moon { display: block; }

/* The accessible name, visually hidden in the bar.  A <span> rather than an
   aria-label because app/i18n.py translates data-i18n regions and has no
   data-i18n-aria-label — the same arrangement as .nav-toggle-label. */
.theme-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Inside the hamburger panel every action is a full-width row, and an icon
   alone on a full-width row reads as a broken button — so there it says what
   it is. */
nav.nav-collapsed .nav-menu .theme-toggle {
  width: 100%;
  height: auto;
  justify-content: flex-start;
  padding: 0.45rem 0.75rem;
}

nav.nav-collapsed .nav-menu .theme-toggle-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

/* login, register and verify-email centre the switcher in a paragraph under
   the form, with a top margin of its own. */
.lang-switcher-paragraph .theme-toggle {
  margin: 15px 0.4rem 0 0;
}