:root {
  --page-bg: #f5f7fb;
  --surface: #ffffff;
  --surface-muted: #f7f9fc;
  --surface-strong: #eaf2ff;
  --text-primary: #172033;
  --text-secondary: #667085;
  --border: #dfe5ef;
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --focus: #2563eb;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-soft: 0 12px 32px rgba(18, 38, 70, .07);
  --sidebar-width: 232px;
  --header-height: 68px;
}

html[data-theme="dark"] {
  --page-bg: #09121f;
  --surface: #101b2a;
  --surface-muted: #152235;
  --surface-strong: #1a2d46;
  --text-primary: #f2f6fb;
  --text-secondary: #9cabc0;
  --border: #283b52;
  --brand: #4d7cf3;
  --brand-hover: #6891f7;
  --focus: #83a6ff;
  --shadow-soft: 0 14px 34px rgba(0, 6, 14, .28);
}

body[data-page="home"] {
  --hp-page: #edf2f7;
  --hp-surface: #ffffff;
  --hp-surface-secondary: #e4ebf3;
  --hp-surface-elevated: #f7f9fc;
  --hp-surface-strong: #dbe5f1;
  --hp-border: #d2dce8;
  --hp-border-strong: #b9c7d7;
  --hp-text: #142033;
  --hp-muted: #59677b;
  --hp-faint: #7f8ca0;
  --hp-brand: #2667df;
  --hp-brand-hover: #1f56bd;
  --hp-brand-ink: #225fc8;
  --hp-brand-soft: #dbe8ff;
  --hp-on-brand: #ffffff;
  --hp-success: #17785c;
  --hp-success-soft: #dcefe8;
  --hp-warning: #80500f;
  --hp-warning-soft: #f5e8cf;
  --hp-danger: #9f303a;
  --hp-danger-soft: #f6dfe2;
  --hp-focus: #225fd2;
  --hp-profile: #dce8fb;
  --hp-profile-secondary: #cbdcf5;
  --hp-profile-border: #b7ccea;
  --hp-profile-text: #10213a;
  --hp-profile-muted: #4d5f77;
  --hp-shadow: 0 10px 28px rgba(20, 36, 58, .08);
  --hp-shadow-large: 0 18px 42px rgba(20, 36, 58, .11);
}

html[data-theme="dark"] body[data-page="home"] {
  --hp-page: #07111d;
  --hp-surface: #0f1b29;
  --hp-surface-secondary: #132337;
  --hp-surface-elevated: #17283c;
  --hp-surface-strong: #1c3047;
  --hp-border: #263a50;
  --hp-border-strong: #38506a;
  --hp-text: #f2f6fb;
  --hp-muted: #9baabe;
  --hp-faint: #7f91a8;
  --hp-brand: #3167d4;
  --hp-brand-hover: #2858b8;
  --hp-brand-ink: #82a9ff;
  --hp-brand-soft: #1b3760;
  --hp-on-brand: #ffffff;
  --hp-success: #43c99e;
  --hp-success-soft: #143d36;
  --hp-warning: #efb558;
  --hp-warning-soft: #3e3220;
  --hp-danger: #e47b82;
  --hp-danger-soft: #442a31;
  --hp-focus: #82a9ff;
  --hp-profile: #12243a;
  --hp-profile-secondary: #182d47;
  --hp-profile-border: #2a4665;
  --hp-profile-text: #f5f8fc;
  --hp-profile-muted: #a8b7c9;
  --hp-shadow: 0 12px 28px rgba(0, 6, 13, .24);
  --hp-shadow-large: 0 18px 42px rgba(0, 6, 13, .32);
}

/* The theme control lives in the shared public header, not only on home. */
.hp-theme-control {
  --theme-surface: var(--hp-surface, var(--ps-surface, var(--cws-surface, var(--cp-panel, #fff))));
  --theme-surface-active: var(--hp-brand-soft, var(--ps-brand-soft, var(--cws-brand-soft, #edf3ff))));
  --theme-line: var(--hp-border, var(--ps-border, var(--cws-line, var(--cp-line, #dfe4ea))));
  --theme-line-strong: var(--hp-border-strong, var(--ps-border-strong, var(--cws-line-strong, #b9c7d7)));
  --theme-text: var(--hp-text, var(--ps-text, var(--cws-text, var(--cp-text, #172033))));
  --theme-muted: var(--hp-muted, var(--ps-muted, var(--cws-muted, var(--cp-muted, #667085))));
  --theme-accent: var(--hp-brand-ink, var(--ps-brand-ink, var(--cws-brand-ink, #225fc8)));
  position: relative;
}

.hp-theme-trigger {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--theme-muted);
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 13px;
  font: inherit;
  cursor: pointer;
}

.hp-theme-trigger:hover,
.hp-theme-trigger[aria-expanded="true"] {
  color: var(--theme-text);
  border-color: var(--theme-line-strong);
}

.hp-theme-menu {
  position: absolute;
  z-index: 70;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: 168px;
  gap: 4px;
  padding: 6px;
  color: var(--theme-text);
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 15px;
  box-shadow: var(--hp-shadow-large, var(--ps-shadow-large, 0 18px 42px rgba(20, 36, 58, .16)));
}

.hp-theme-menu[hidden] {
  display: none;
}

.hp-theme-menu button {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  color: var(--theme-muted);
  background: transparent;
  border: 0;
  border-radius: 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hp-theme-menu button:hover,
.hp-theme-menu button[aria-checked="true"] {
  color: var(--theme-accent);
  background: var(--theme-surface-active);
}

@media (max-width: 767px) {
  .hp-theme-trigger {
    width: 44px;
    padding: 0;
  }

  .hp-theme-trigger [data-theme-label] {
    display: none;
  }
}