/* Original colors remain in home.css; alternate themes override their tokens. */
.theme-picker {
  position: relative;
  flex-shrink: 0;
}
.theme-options {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 244px;
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 12px 30px #23352a18;
}
.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
}
.theme-option:hover,
.theme-option:focus-within {
  background: var(--mint-light);
}
.theme-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--mint);
}
.theme-option input:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}
.theme-swatches {
  display: flex;
  gap: 3px;
}
.theme-swatches i {
  width: 14px;
  height: 20px;
  border: 1px solid #00000012;
  border-radius: 3px;
}
@media (max-width: 760px) {
  .theme-picker {
    position: static;
  }
  .theme-toggle {
    width: 34px;
    height: 34px;
  }
  .theme-options {
    top: 65px;
    right: 14px;
    max-width: calc(100vw - 28px);
  }
}
@media (max-width: 380px) {
  .nav-actions .button .icon {
    display: none;
  }
  .nav-actions {
    gap: 5px;
  }
}

:root[data-theme="coral-teal"],
:root[data-theme="apricot-blue"],
:root[data-theme="yellow-forest"],
:root[data-theme="glacier-blue"],
:root[data-theme="mist-indigo"] {
  --secondary-ink: var(--muted);
  --soft-line: var(--line);
  --soft-surface: var(--mint-light);
  --section-background: var(--mint-light);
  --flow-background: var(--mint-light);
  --flow-accent: var(--mint);
  --icon-mint: var(--mint-light);
  --icon-coral: var(--coral-light);
  --closing-background: var(--coral-light);
  --selection: var(--coral-light);
  --toast-background: var(--ink);
}

:root[data-theme="coral-teal"] {
  --paper: #faf9f6;
  --ink: #293733;
  --muted: #5e6e68;
  --coral: #c94f43;
  --coral-light: #fce9e4;
  --mint: #147d70;
  --mint-light: #eaf4ef;
  --blue: #3e739f;
  --line: #d8e5de;
  --primary-hover: #b34035;
  --primary-edge: #973c34;
  --primary-shadow: #c94f4318;
  --primary-shadow-hover: #c94f4330;
  --accent-line: #a4cfc1;
  --icon-blue: #e3edf8;
  --wave-color: #83b9ad;
  --hero-background: #e0f0e9;
  --hero-wash: linear-gradient(180deg, #faf9f6cc 0%, #eef8f2b3 20%, #fff1eaa3 55%, #faf9f6bd 85%, var(--paper) 100%);
  --flow-dot: #86ad9c47;
  --wordmark-color: #dce9e2;
  --wordmark-accent: #efd4cc;
}

:root[data-theme="apricot-blue"] {
  --paper: #fafaf8;
  --ink: #283b46;
  --muted: #5e6d77;
  --coral: #b74662;
  --coral-light: #f8e8e4;
  --mint: #206b83;
  --mint-light: #eaf3f6;
  --blue: #8a486c;
  --line: #d9e3e8;
  --primary-hover: #9e3650;
  --primary-edge: #88354a;
  --primary-shadow: #b7466218;
  --primary-shadow-hover: #b7466230;
  --accent-line: #accbd9;
  --icon-coral: #f4d9cd;
  --icon-blue: #eee4f1;
  --wave-color: #c9a8a0;
  --hero-background: #f4d9cd;
  --hero-wash: linear-gradient(180deg, #fafaf8cc 0%, #fbece6b3 20%, #edf6f9a3 55%, #fafaf8bd 85%, var(--paper) 100%);
  --flow-dot: #8faebe47;
  --wordmark-color: #dae7ed;
  --wordmark-accent: #ecd5d0;
}

:root[data-theme="yellow-forest"] {
  --paper: #fafbf7;
  --ink: #293733;
  --muted: #606c60;
  --coral: #806516;
  --coral-light: #faf2cf;
  --mint: #28644f;
  --mint-light: #eaf2ec;
  --blue: #3d729d;
  --line: #dce4d8;
  --primary: #f1d66a;
  --primary-ink: #293733;
  --primary-icon-filter: brightness(0);
  --primary-hover: #e5c653;
  --primary-edge: #ae922f;
  --primary-shadow: #ae922f18;
  --primary-shadow-hover: #ae922f30;
  --accent-line: #adcbb8;
  --icon-blue: #eaf1f8;
  --wave-color: #b7c78d;
  --hero-background: #f4f1d9;
  --hero-wash: linear-gradient(180deg, #fafbf7cc 0%, #fff8dcb3 20%, #eaf1f8a3 55%, #fafbf7bd 85%, var(--paper) 100%);
  --section-background: #eaf1f8;
  --flow-dot: #9aad8b47;
  --wordmark-color: #dce6dc;
  --wordmark-accent: #ebe0ad;
}

:root[data-theme="glacier-blue"] {
  --paper: #f8fbfc;
  --ink: #263b48;
  --muted: #586e7a;
  --coral: #2466a3;
  --coral-light: #e6f0fb;
  --mint: #147b79;
  --mint-light: #e6f4f1;
  --blue: #6855a1;
  --line: #d5e4eb;
  --primary-hover: #1d568c;
  --primary-edge: #184774;
  --primary-shadow: #2466a318;
  --primary-shadow-hover: #2466a330;
  --accent-line: #a5cecf;
  --icon-blue: #eeeafa;
  --wave-color: #8cbad4;
  --hero-background: #e6f2fa;
  --hero-wash: linear-gradient(180deg, #f8fbfccc 0%, #e6f2fab3 20%, #e6f4f1a3 55%, #f8fbfcbd 85%, var(--paper) 100%);
  --flow-dot: #85b6bd47;
  --wordmark-color: #d9e9f0;
  --wordmark-accent: #cddff2;
}

:root[data-theme="mist-indigo"] {
  --paper: #fafafd;
  --ink: #33364a;
  --muted: #65677d;
  --coral: #6252a3;
  --coral-light: #eeeafa;
  --mint: #267787;
  --mint-light: #e7f3f6;
  --blue: #416ab1;
  --line: #dfdfee;
  --primary-hover: #51438c;
  --primary-edge: #443776;
  --primary-shadow: #6252a318;
  --primary-shadow-hover: #6252a330;
  --accent-line: #b1cedb;
  --icon-blue: #e5edfb;
  --wave-color: #aba5d0;
  --hero-background: #eeeafa;
  --hero-wash: linear-gradient(180deg, #fafafdcc 0%, #eeeafab3 20%, #e7f3f6a3 55%, #fafafdbd 85%, var(--paper) 100%);
  --flow-dot: #a4a8c647;
  --wordmark-color: #e2e0ef;
  --wordmark-accent: #d2dcf0;
}