/* Light / dark mode — driven by the studio brand picker (Mirage = light,
   Avian = dark). This layers OVER the accent theme: it overrides only the
   background/foreground tokens, so the chosen theme's --accent still applies.
   MUST be loaded AFTER the theme stylesheets so these win on equal specificity. */

/* Mirage (default) — light. Theme tokens already supply light values, so no
   overrides are needed here; the class exists for symmetry + future tweaks. */
.mode-light .page {
  --cover-bg: var(--bg-mid);
}

/* Avian — dark. Deep-navy wash with light text; accent stays from the theme.
   The cover logo tray is NOT a solid white block here — it sits *in* the dark
   deck as a translucent glass pill, and each brand logo gets its own small light
   chip so colored, monochrome, and favicon marks all stay legible on the dark
   background. (--pill-ink stays dark because the text fallback rides a light chip.) */
.mode-dark .page {
  --bg-from: #18324e;
  --bg-mid:  #0c1925;
  --bg-to:   #122a23;
  --text:    #eef3f8;
  --muted:   #94a6b8;
  --rule:    rgba(255, 255, 255, 0.12);
  --pill-bg: rgba(255, 255, 255, 0.05);
  --pill-ink: #1a1a1a;
  --frame-bg: rgba(255, 255, 255, 0.05);
  --cover-bg: #0c1925;
}

/* Dark deck: glass tray + per-logo light chips (cover + Upwork thumbnail). */
.mode-dark .layout-cover .stack,
.mode-dark .layout-thumbnail .stack {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.40);
}
.mode-dark .layout-cover .stack .logo {
  background: #ffffff;
  border-radius: 22px;
  padding: 20px 30px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.mode-dark .layout-thumbnail .stack .logo {
  background: #ffffff;
  border-radius: 13px;
  padding: 11px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}