/* Development-only HangToken visual integration. No layout or semantic status changes. */
html:root body:not(:has(.hero)) {
  --background: #f4f9fa; --foreground: #102735;
  --card: #ffffff; --card-foreground: #102735;
  --popover: #ffffff; --popover-foreground: #102735;
  --primary: #007f72; --primary-foreground: #ffffff;
  --secondary: #e7f3ef; --secondary-foreground: #15594f;
  --muted: #edf4f5; --muted-foreground: #566b76;
  --accent: #e0f1eb; --accent-foreground: #15594f;
  --border: #dce7e8; --input: #ccdadd; --ring: #008b7c;
  --sidebar: #ffffff; --sidebar-foreground: #102735;
  --sidebar-primary: #007f72; --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e0f1eb; --sidebar-accent-foreground: #15594f;
  --sidebar-border: #dce7e8; --sidebar-ring: #008b7c;
}
html.dark body:not(:has(.hero)) {
  --background: #0c1d25; --foreground: #e4eeee;
  --card: #14262f; --card-foreground: #e4eeee;
  --popover: #14262f; --popover-foreground: #e4eeee;
  --primary: #60d0b8; --primary-foreground: #102e32;
  --secondary: #193830; --secondary-foreground: #c1e9df;
  --muted: #182f38; --muted-foreground: #a6bbc2;
  --accent: #193830; --accent-foreground: #c1e9df;
  --border: #30464e; --input: #30464e; --ring: #60d0b8;
  --sidebar: #14262f; --sidebar-foreground: #e4eeee;
  --sidebar-primary: #60d0b8; --sidebar-primary-foreground: #102e32;
  --sidebar-accent: #193830; --sidebar-accent-foreground: #c1e9df;
  --sidebar-border: #30464e; --sidebar-ring: #60d0b8;
}
html:root {
  --ht-gradient: linear-gradient(135deg, #007f72, #18594f);
  --ifm-color-primary: #007f72;
  --ifm-color-primary-dark: #007267; --ifm-color-primary-darker: #006b60;
  --ifm-color-primary-darkest: #005950; --ifm-color-primary-light: #008c7d;
  --ifm-color-primary-lighter: #009283; --ifm-color-primary-lightest: #00a594;
  --ifm-background-color: #f4f9fa; --ifm-background-surface-color: #ffffff;
  --ifm-font-color-base: #102735; --ifm-heading-color: #102735;
  --ifm-navbar-background-color: #ffffff; --ifm-footer-background-color: #102e32;
  --ifm-color-emphasis-200: #dce7e8; --ifm-menu-color-active: #007f72;
  --ifm-menu-color-background-active: #e0f1eb;
  --ifm-global-radius: 0.65rem; --ifm-card-border-radius: 0.8rem;
}
html[data-theme='dark'] {
  --ht-gradient: linear-gradient(135deg, #60d0b8, #9de0cf);
  --ifm-color-primary: #60d0b8;
  --ifm-color-primary-dark: #44c8ab; --ifm-color-primary-darker: #36c4a5;
  --ifm-color-primary-darkest: #2eaa90; --ifm-color-primary-light: #7cd8c5;
  --ifm-color-primary-lighter: #8adccb; --ifm-color-primary-lightest: #b4e8df;
  --ifm-background-color: #0c1d25; --ifm-background-surface-color: #14262f;
  --ifm-font-color-base: #e4eeee; --ifm-heading-color: #e4eeee;
  --ifm-navbar-background-color: #14262f; --ifm-footer-background-color: #102e32;
  --ifm-color-emphasis-200: #30464e; --ifm-menu-color-active: #60d0b8;
  --ifm-menu-color-background-active: #193830;
}
html:root [class*='heroBanner_'] { background: radial-gradient(ellipse at 30% 0%, #008b7c18, transparent 70%); }
html:root [class*='primaryButton_'], html:root .navbar-login-button { background: #007f72; color: #fff; }
html:root [class*='badge_'] { color: var(--ifm-color-primary); background: #008b7c12; border-color: #008b7c30; }
html:root [class*='statNum_'] { background-image: var(--ht-gradient); }
/* Blue night palette; keep light mode and the user's mode preference unchanged. */
html.dark body:not(:has(.hero)) {
  --background:#0b1220; --foreground:#e6edf7;
  --card:#142033; --card-foreground:#e6edf7; --popover:#142033; --popover-foreground:#e6edf7;
  --primary:#78aaff; --primary-foreground:#0b1220;
  --secondary:#1c2e48; --secondary-foreground:#d7e6ff;
  --muted:#19273d; --muted-foreground:#a5b5cd; --accent:#1c2e48; --accent-foreground:#d7e6ff;
  --border:#2b3c56; --input:#2b3c56; --ring:#78aaff;
  --sidebar:#111d30; --sidebar-foreground:#e6edf7; --sidebar-primary:#78aaff; --sidebar-primary-foreground:#0b1220;
  --sidebar-accent:#1c2e48; --sidebar-accent-foreground:#d7e6ff; --sidebar-border:#2b3c56; --sidebar-ring:#78aaff;
}
html[data-theme='dark'] {
  --ht-gradient:linear-gradient(135deg,#78aaff,#abcaff);
  --ifm-color-primary:#78aaff; --ifm-color-primary-dark:#5996ff; --ifm-color-primary-darker:#498cff;
  --ifm-color-primary-darkest:#1c70ff; --ifm-color-primary-light:#97beff; --ifm-color-primary-lighter:#a7c8ff; --ifm-color-primary-lightest:#d5e5ff;
  --ifm-background-color:#0b1220; --ifm-background-surface-color:#142033;
  --ifm-font-color-base:#e6edf7; --ifm-heading-color:#e6edf7;
  --ifm-navbar-background-color:#111d30; --ifm-footer-background-color:#111d30;
  --ifm-color-emphasis-200:#2b3c56; --ifm-menu-color-active:#78aaff; --ifm-menu-color-background-active:#1c2e48;
}
html[data-theme='dark'] [class*='heroBanner_'] {background:radial-gradient(ellipse at 30% 0%,#528aff20,transparent 70%)}
html[data-theme='dark'] [class*='primaryButton_'],html[data-theme='dark'] .navbar-login-button {background:#2963bf;color:#fff}
html[data-theme='dark'] [class*='badge_'] {background:#528aff15;border-color:#528aff40}
html.dark {--text:#e6edf7;--panel:#142033;--teal:#78aaff;--muted:#a5b5cd;--line:#2b3c56;--tint:#111d30;background:#0b1220;color:#e6edf7}
html.dark body {background:#0b1220;color:#e6edf7}
html.dark .announcement,html.dark .preview-note,html.dark .solution-card.custom {background:#1c2e48;color:#d7e6ff}
html.dark .announcement a,html.dark .pill,html.dark .steps-inline {color:#abcaff}
html.dark .flow-panel,html.dark .code-panel,html.dark .solution-card {background:#142033}
html.dark .campaign-stage.spirit {background:#142641}
html.dark .spirit .campaign-kicker,html.dark .spirit .campaign-subtitle,html.dark .spirit .campaign-main p {color:#bbd2f4}
html.dark .button:not(.outline) {color:#0b1220}
/* Homepage text tokens must never inherit NewAPI surface tokens. */
html body:has(.hero) {--muted:#4b6070;--home-secondary:#4b6070;--teal:#006f63}
html.dark body:has(.hero) {--muted:#b8c7dc;--home-secondary:#b8c7dc;--teal:#8bb8ff}
body:has(.hero) :is(.hero-foot,.model-note,.footer-bottom,.steps-inline,.pill) {color:var(--home-secondary)}
body:has(.hero) .campaign-selectors button span {color:var(--home-secondary)}
body:has(.hero) input::placeholder,body:has(.hero) textarea::placeholder {color:var(--home-secondary);opacity:1}
body:has(.hero) .code-label,body:has(.hero) .code-footer {color:#b8cbd8}
html.dark body:has(.hero) .campaign-stage.models {color:#123c32}
html.dark body:has(.hero) .campaign-stage.offers {color:#403c2a}
body:has(.hero) .flow-panel small {color:#4b6070}
html.dark body:has(.hero) .flow-panel small {color:#b8c7dc}