/* Theme toggle variables
   Dark variables are defined by theme.json.
   Light mode overrides live here (front-end toggle).
*/
:root[data-theme="light"]{
  --wp--preset--color--mso-bg: #F7FAFC;
  --wp--preset--color--mso-surface: #FFFFFF;
  --wp--preset--color--mso-surface-2: #EEF6FA;
  --wp--preset--color--mso-border: rgba(0,0,0,0.10);
  --wp--preset--color--mso-text: rgba(0,0,0,0.90);
  --wp--preset--color--mso-muted: rgba(0,0,0,0.65);
  --wp--preset--color--mso-accent: #0B6B7A;
  --wp--preset--color--mso-accent-2: #0E8698;
  --wp--preset--color--mso-link: #0B6B7A;
}

/* Make the toggle button look consistent inside the header */
.mso-theme-toggle button,
button.mso-theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .75rem;
  border-radius:999px;
  border:1px solid var(--wp--preset--color--mso-border);
  background: var(--wp--preset--color--mso-surface);
  color: var(--wp--preset--color--mso-text);
  cursor:pointer;
  line-height:1;
}
.mso-theme-toggle button:hover,
button.mso-theme-toggle:hover{
  border-color: color-mix(in srgb, var(--wp--preset--color--mso-border) 40%, var(--wp--preset--color--mso-accent) 60%);
}
.mso-theme-toggle svg{
  width:18px;
  height:18px;
  fill: currentColor;
  opacity:.9;
}