/* Each theme overrides the same set of CSS custom properties. */

html[data-portal-theme="default"] .is-portal {
  --bg: #f8faf4;
  --header-bg: #f8faf4;
  --surface: #f2f6ed;
  --card: #ffffff;
  --text: #273831;
  --muted: #5e6c64;
  --line: #dce2da;
  --line-strong: #acbdb0;
  --accent: #3c6552;
  --accent-soft: #edf4e7;
  --accent-line: #bed0bf;
  --portal-deep: #436c56;
  --portal-green: #49745f;
  --portal-green-soft: #4d775f;
  --portal-on-dark: #ffffff;
  --portal-muted-on-dark: #f3f8ef;
  --portal-highlight: #eef6df;
  --portal-highlight-hover: #f8fbee;
  --portal-art: #cee4c8;
  --portal-shadow: #2c493e0a;
  --portal-shadow-hover: #2c493e12;
  color-scheme: light;
}

html[data-portal-theme="night"] .is-portal {
  --bg: #141c2b;
  --header-bg: #141c2b;
  --surface: #243047;
  --card: #1d293d;
  --text: #edf2fc;
  --muted: #b8c5dc;
  --line: #35445d;
  --line-strong: #7186a8;
  --accent: #abc9ff;
  --accent-soft: #2a3c59;
  --accent-line: #5d7fac;
  --portal-deep: #253b5c;
  --portal-green: #304c72;
  --portal-green-soft: #35547d;
  --portal-on-dark: #ffffff;
  --portal-muted-on-dark: #e0eafb;
  --portal-highlight: #d1e3ff;
  --portal-highlight-hover: #eaf2ff;
  --portal-art: #b1caff;
  --portal-shadow: #00000020;
  --portal-shadow-hover: #00000038;
  color-scheme: dark;
}

html[data-portal-theme="teal"] .is-portal {
  --bg: #f2f9f8;
  --header-bg: #f2f9f8;
  --surface: #e8f3f2;
  --card: #ffffff;
  --text: #233e41;
  --muted: #526f73;
  --line: #d4e5e4;
  --line-strong: #9cbfbe;
  --accent: #23676d;
  --accent-soft: #e0f1ed;
  --accent-line: #a7d0c9;
  --portal-deep: #286568;
  --portal-green: #2c7173;
  --portal-green-soft: #307477;
  --portal-on-dark: #ffffff;
  --portal-muted-on-dark: #edf9f6;
  --portal-highlight: #d4f3e8;
  --portal-highlight-hover: #eafbf4;
  --portal-art: #bce5de;
  --portal-shadow: #164f510a;
  --portal-shadow-hover: #164f5112;
  color-scheme: light;
}

html[data-portal-theme="dawn"] .is-portal {
  --bg: #fcf7f5;
  --header-bg: #fcf7f5;
  --surface: #f5eae7;
  --card: #fffdfb;
  --text: #49363c;
  --muted: #776069;
  --line: #eadbd8;
  --line-strong: #cbb0b1;
  --accent: #925363;
  --accent-soft: #f8e7e5;
  --accent-line: #dfb6ba;
  --portal-deep: #86525e;
  --portal-green: #935c68;
  --portal-green-soft: #99616e;
  --portal-on-dark: #ffffff;
  --portal-muted-on-dark: #fff3ed;
  --portal-highlight: #ffebd5;
  --portal-highlight-hover: #fff5e8;
  --portal-art: #efc9c4;
  --portal-shadow: #623a410a;
  --portal-shadow-hover: #623a4112;
  color-scheme: light;
}


/* Theme controls: capsule buttons in the desktop navigation bar. */
.portal-navigation-bar { display: flex; align-items: center; gap: 16px; width: 100%; order: 3; padding: 5px; background: var(--portal-green); border-radius: 10px; }
.portal-navigation-bar .main-navigation { width: auto; flex: 1; order: 0; padding: 0; background: transparent; }
.portal-palette { display: flex; align-items: center; gap: 3px; flex-shrink: 0; padding: 4px; margin-right: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.portal-palette button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.4; }
.portal-palette button:hover { background: var(--surface); color: var(--text); }
.portal-palette button[aria-pressed="true"] { background: var(--accent); color: var(--card); }
.portal-palette button:focus-visible { outline-offset: 2px; }
.portal-palette-swatch { width: 12px; height: 12px; border: 1px solid #ffffff80; border-radius: 50%; background: linear-gradient(135deg, var(--swatch) 50%, #e8f1eb 50%); }
/* Keep theme controls visible on small screens while navigation collapses separately. */
@media (max-width: 1150px) and (min-width: 961px) {
  .portal-navigation-bar { gap: 8px; }
  .portal-navigation-bar .main-navigation > a { padding-inline: 14px; }
}
@media (max-width: 960px) {
  .portal-navigation-bar { flex-wrap: wrap; background: transparent; padding: 0; gap: 12px; }
  .portal-navigation-bar .main-navigation { order: 2; flex-basis: 100%; background: var(--portal-green); padding: 5px; }
  .portal-palette { margin: 0 0 0 auto; }
}
@media (max-width: 440px) {
  .portal-palette { width: 100%; }
  .portal-palette button { flex: 1; padding-inline: 6px; }
}