/* ============ Dark theme (light is the default in style.css). <html data-theme> is set in <head> before first paint ============ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050505;
  --fg: #ffffff;
  --text-2: rgba(255,255,255,.62);
  --muted: rgba(255,255,255,.5);
  --muted-2: rgba(255,255,255,.4);
  --card: rgba(21,21,21,.8);
  --card-solid: #151515;
  --surface: #151515;
  --surface-2: #212121;
  --surface-3: #2a2a2a;
  --line: rgba(255,255,255,.08);
  --glass: rgba(21,21,21,.8);
  --glass-edge: inset 0 0 0 1px rgba(255,255,255,.06);
  --primary: #ffffff;
  --on-primary: #050505;
}

/* Colours the light conversion wrote as literals; dark values are the originals from the midu template */
[data-theme="dark"] .menu__item::before { background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,0)); }
[data-theme="dark"] .scene { background: radial-gradient(120% 90% at 70% 10%, #2a2a2a 0%, #0c0c0c 55%, #050505 100%); }
[data-theme="dark"] .scene__grid { background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); border-color: #1d1d1d; }
[data-theme="dark"] .monitor__screen { box-shadow: 0 40px 120px rgba(0,0,0,.7); }
[data-theme="dark"] .reviews__trust { background: rgba(255,255,255,.05); }
[data-theme="dark"] .reviews__trust .quote { color: rgba(255,255,255,.12); }
[data-theme="dark"] .reviews__dots i { background: #444; }
[data-theme="dark"] .reviews__dots i.on { background: var(--fg); }
[data-theme="dark"] .plan__badge { color: rgba(255,255,255,.8); }
[data-theme="dark"] .select-pill { background: rgba(255,255,255,.07); }
[data-theme="dark"] .card .select-pill { background: rgba(10,10,10,.45); }
[data-theme="dark"] .contact__backdrop { background: rgba(0,0,0,.45); }
[data-theme="dark"] .field:focus-within { background: var(--surface-3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
[data-theme="dark"] .contact__send:hover { background: #e6e6e6; }

/* ============ Theme toggle: sits left of "Get in touch", and left of the menu pill once the CTA hides ============ */
.nav__right { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.menu { z-index: 2; }   /* the open menu panel covers the toggle */
.theme-toggle { position: relative; width: 48px; height: 48px; flex: none; border-radius: 16px; display: grid; place-items: center; color: var(--fg);
  background: var(--glass); box-shadow: var(--glass-edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background-color .3s var(--ease), color .5s var(--ease), opacity 1s var(--ease), transform 1s var(--ease); }
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle svg { position: absolute; transition: opacity .4s var(--ease), transform .6s var(--ease); }
.theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(.6); }
[data-theme="dark"] .theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: none; }
body.is-loading .theme-toggle { opacity: 0; transform: translateY(-10px); }
.theme-toggle:focus:not(:focus-visible) { outline: none; }

@media (max-width: 1100px) {
  .nav__right { margin-right: 142px; }   /* menu pill: 132px wide at the right padding */
  .theme-toggle { margin-top: 6px; }     /* centred on the 60px pill */
}
@media (max-width: 809px) {
  .nav__right { margin-right: 105px; }   /* menu pill: 95px + 10px gap */
  .theme-toggle { width: 45px; height: 45px; border-radius: 14px; margin-top: 0; }
}