/* Shared palettes for standalone Helstopia pages. Home and timers keep their
   existing skin-specific layouts. */
html[data-helto-site-skin] {
  color-scheme: dark;
  --hs-bg: #0a120e;
  --hs-panel: #14231b;
  --hs-surface: #1c2e23;
  --hs-field: #0c1810;
  --hs-text: #eef7ef;
  --hs-muted: #b8cdbc;
  --hs-line: #557161;
  --hs-accent: #c9ff66;
  --hs-on-accent: #192900;
  --hs-success-bg: #15392d;
  --hs-success: #b9f7dd;
  --hs-warning-bg: #352d20;
  --hs-warning: #f7e1ab;
  --hs-error-bg: #3c222a;
  --hs-error: #ffdad6;
  --line: var(--hs-line);
  --panel: var(--hs-panel);
  --ink: var(--hs-text);
  --text: var(--hs-text);
  --muted: var(--hs-muted);
  --accent: var(--hs-accent);
  background: var(--hs-bg);
}

html[data-helto-site-skin="classic"] {
  --hs-bg: #101010;
  --hs-panel: #202020;
  --hs-surface: #2d2d2d;
  --hs-field: #171717;
  --hs-text: #f4f4f4;
  --hs-muted: #c3c3c3;
  --hs-line: #777;
  --hs-accent: #e5e8ea;
  --hs-on-accent: #1b1c1e;
}

html[data-helto-site-skin="metal"] {
  --hs-bg: #181e18;
  --hs-panel: #252f25;
  --hs-surface: #353828;
  --hs-field: #171f17;
  --hs-text: #fff6e3;
  --hs-muted: #d7c8ab;
  --hs-line: #958051;
  --hs-accent: #f2ca78;
  --hs-on-accent: #302108;
}

html[data-helto-site-skin="ice"] {
  --hs-bg: #14263b;
  --hs-panel: #1b324a;
  --hs-surface: #254259;
  --hs-field: #112438;
  --hs-text: #edf7ff;
  --hs-muted: #c2d8eb;
  --hs-line: #7298b9;
  --hs-accent: #a1d7ff;
  --hs-on-accent: #10253a;
}

html[data-helto-site-skin="redline"] {
  --hs-bg: #151014;
  --hs-panel: #261a20;
  --hs-surface: #36232a;
  --hs-field: #1d151a;
  --hs-text: #fff1f3;
  --hs-muted: #e6bec5;
  --hs-line: #a06d78;
  --hs-accent: #ff9daa;
  --hs-on-accent: #2c1218;
}

html[data-helto-site-skin="whitelab"] {
  color-scheme: light;
  --hs-bg: #f3efe5;
  --hs-panel: #fffdf8;
  --hs-surface: #eeebe2;
  --hs-field: #fffefa;
  --hs-text: #203642;
  --hs-muted: #475c64;
  --hs-line: #788d96;
  --hs-accent: #235d78;
  --hs-on-accent: #fff;
  --hs-success-bg: #e1f1e8;
  --hs-success: #19583c;
  --hs-warning-bg: #fbefd6;
  --hs-warning: #634613;
  --hs-error-bg: #f9e6e6;
  --hs-error: #841e2b;
}

html[data-helto-site-skin] body {
  background: var(--hs-bg);
  color: var(--hs-text);
  accent-color: var(--hs-accent);
}

html[data-helto-site-skin] .member-panel {
  --mp-bg: var(--hs-panel);
  --mp-line: var(--hs-line);
  --mp-text: var(--hs-text);
  --mp-muted: var(--hs-muted);
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
}

html[data-helto-site-skin] :is(.member-panel, dialog) {
  background: var(--hs-panel);
  border-color: var(--hs-line);
  color: var(--hs-text);
}

html[data-helto-site-skin] dialog::backdrop { background: rgb(0 0 0 / 58%); }

html[data-helto-site-skin] :is(.member-panel input:not([type="checkbox"]):not([type="radio"]), .member-panel select, .member-panel textarea) {
  background: var(--hs-field);
  border-color: var(--hs-line);
  color: var(--hs-text);
}

html[data-helto-site-skin] :is(.member-panel button, .member-panel .mp-link):not(.kakao-signin) {
  background: var(--hs-surface);
  border-color: var(--hs-line);
  color: var(--hs-text);
}

html[data-helto-site-skin] :is(.member-panel .primary, .request-link, .comm-member .comm-button.comm-primary, .member-panel .comm-nav [aria-current="page"]):not(.kakao-signin) {
  background: var(--hs-accent);
  border-color: var(--hs-accent);
  color: var(--hs-on-accent);
}

html[data-helto-site-skin] :is(.member-panel button[aria-pressed="true"], .member-panel .danger):not(.kakao-signin) {
  border-color: var(--hs-accent);
  color: var(--hs-accent);
}

html[data-helto-site-skin] .member-panel .danger:not(.kakao-signin) {
  border-color: var(--hs-error);
  color: var(--hs-error);
}

html[data-helto-site-skin] :is(a, .brand, .eyebrow, .member-panel .mp-counts, .member-panel .store-eyebrow, .member-panel .bank-eyebrow, .member-panel .comm-eyebrow, .comm-stat strong, .summary .number, .personal-result, .store-review summary, .bank-review summary) {
  color: var(--hs-accent);
}

html[data-helto-site-skin] .payment-brand { color: var(--hs-accent) !important; }

html[data-helto-site-skin] :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--hs-accent);
  outline-offset: 3px;
}

html[data-helto-site-skin] :is(.member-panel small, .lead, .muted, .summary p, .policy-foot, .store-help, .store-claim dt, .bank-help, .bank-page dt, .bank-page h2 small, .personal-page .help, .comm-stat span, .comm-member-email, .member-panel .comm-help, .member-panel .comm-muted, .comm-notice-date, .payment-terms dd, .plan-selection-benefits, .plan-feature-detail) {
  color: var(--hs-muted);
}

html[data-helto-site-skin] :is(.payment-order, .payment-terms, .payment-connection, .plan-card, .member-panel .mp-card, .store-product, .store-claim, .bank-plan, .bank-order, .bank-account, .personal-page aside, .personal-record, .comm-card, .comm-stat, .comm-member-card, .comm-recipient-box, .comm-saved-card, .comm-notice-preview, .comm-exclusion, .comm-member .comm-notice, .summary article, .formula, #subscriptionProducts label) {
  background: var(--hs-surface);
  border-color: var(--hs-line);
}

html[data-helto-site-skin] :is(.payment-terms dt, .plan-price strong, .store-product .store-price, .bank-plan .bank-price, .comm-notice-preview h4, .member-panel .comm-notice-preview p) {
  color: var(--hs-text);
}

html[data-helto-site-skin] :is(.store-product.is-premium, .bank-plan.is-premium, .plan-card--premium) {
  border-color: var(--hs-accent);
}

html[data-helto-site-skin] :is(.plan-category, .plan-card--premium .plan-category, .plan-inline-note, .comm-required) {
  color: var(--hs-accent);
}

html[data-helto-site-skin] :is(.plan-inline-note, .table-wrap, table :is(th, td), .payment-terms dl > div, .payment-workspace details, .personal-page fieldset, .personal-page details, .bank-refund-proof, .comm-selection, .member-panel .comm-empty) {
  border-color: var(--hs-line);
}

html[data-helto-site-skin] :is(thead th, .table-wrap th) {
  background: var(--hs-surface);
  color: var(--hs-text);
}

html[data-helto-site-skin] :is(.store-badge, .bank-badge, .comm-badge, .comm-status, #subscriptionProducts label:has(input:checked)) {
  background: var(--hs-surface);
  border-color: var(--hs-accent);
  color: var(--hs-text);
}

html[data-helto-site-skin] :is(.store-badge.is-active, .bank-badge.is-active, .bank-page .bank-confirm, .store-page .store-confirm, .bank-page .bank-selected-summary, .comm-review) {
  background: var(--hs-success-bg);
  border-color: var(--hs-success);
  color: var(--hs-success);
}

html[data-helto-site-skin] :is(.store-access-summary, .bank-access-summary) {
  color: var(--hs-success) !important;
}

html[data-helto-site-skin] :is(.draft, .notice, .bank-note, .store-note, .comm-callout, .comm-delivery-note, .comm-unavailable, .comm-warning, #emailReadyNotice:not(:empty)) {
  background: var(--hs-warning-bg);
  border-color: var(--hs-warning);
  color: var(--hs-warning) !important;
}

html[data-helto-site-skin] :is(.bank-note strong, .store-note strong, .comm-delivery-note strong, .store-unavailable, .comm-member .comm-phone-state) {
  color: var(--hs-warning);
}

html[data-helto-site-skin] :is(.member-panel .email-auth-error, .member-panel .comm-status.is-error, .member-panel .comm-status.comm-error, .comm-confirm, .store-badge.is-closed, .bank-badge.is-closed) {
  background: var(--hs-error-bg);
  border-color: var(--hs-error);
  color: var(--hs-error);
}

html[data-helto-site-skin] .member-panel input[aria-invalid="true"] { border-color: var(--hs-error); }

html[data-helto-site-skin] .benefit-overview {
  --benefit-muted: var(--hs-muted);
  --benefit-ice: var(--hs-text);
  --benefit-mint: var(--hs-success);
  --benefit-gold: var(--hs-warning);
  --benefit-surface: var(--hs-surface);
  --benefit-rule: var(--hs-line);
}

html[data-helto-site-skin] .benefit-overview :is(.benefit-quick-card[data-plan], .benefit-matrix thead th, .benefit-matrix .benefit-matrix-group th) {
  background: var(--hs-surface);
  color: var(--hs-text);
}

html[data-helto-site-skin] .benefit-overview :is(.benefit-quick-card[data-plan="light"], .benefit-quick-card[data-plan="premium"]) {
  border-color: var(--hs-accent);
}

html[data-helto-site-skin] .benefit-overview :is(.benefit-quota, td:last-child .benefit-quota) {
  background: var(--hs-panel);
  border-color: var(--hs-line);
  color: var(--hs-accent);
}


@media screen {
  html[data-helto-page="nutrition"][data-helto-site-skin] :is(.card, .hero) {
    background: var(--hs-panel);
    border-color: var(--hs-line);
    color: var(--hs-text);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] :is(.nutrient, .menu-preferences, .menu-check, .diary-food, .diary-record, #nutritionTargetSettings) {
    background: var(--hs-surface);
    border-color: var(--hs-line);
    color: var(--hs-text);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] :is(.hero blockquote, .diary-analysis, .menu-check:has(input:checked)) {
    border-color: var(--hs-accent);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] .menu-check:has(input:checked) {
    background: var(--hs-panel);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] :is(.hero cite, .tag, .meal strong, #levelValue, .diary-total, #notice, #settingsNotice) {
    color: var(--hs-accent);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] :is(.menu-preferences summary span, .muted) {
    color: var(--hs-muted);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] :is(.diary-error, #settingsError) {
    color: var(--hs-error);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] :is(select, textarea, input:not([type="checkbox"]):not([type="radio"])) {
    background: var(--hs-field);
    border-color: var(--hs-line);
    color: var(--hs-text);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--hs-accent);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] button {
    background: var(--hs-accent);
    border-color: var(--hs-accent);
    color: var(--hs-on-accent);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] :is(button.secondary, button[data-diary-action="remove"]) {
    background: var(--hs-surface);
    border-color: var(--hs-line);
    color: var(--hs-text);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] :is(label, small, summary, .profile dt) {
    color: var(--hs-muted);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] .question {
    color: var(--hs-text);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] :is(.meal, .check-row) {
    border-color: var(--hs-line);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] #checkSummary {
    border-color: var(--hs-accent);
  }

  html[data-helto-page="nutrition"][data-helto-site-skin] .bar { background: var(--hs-surface); }
  html[data-helto-page="nutrition"][data-helto-site-skin] .bar span { background: var(--hs-accent); }
}