/* ==========================================================================
   kaloria.ai /help/ — reskin into the shared Kaloria design (2026-10-10).
   Loaded after /css/main.css + /help/css/help.css; remaps their tokens and restyles the shared chrome.
   No help HTML/string changes (Font Awesome icons stay). Requires /assets/ui/kaloria-ui.css.
   ========================================================================== */
:root {
  --primary: var(--kui-accent);
  --primary-light: var(--kui-brand);
  --primary-dark: var(--kui-accent-2);
  --secondary: var(--kui-amber);
  --text-dark: var(--kui-ink);
  --text-light: var(--kui-gray);
  --text-muted: var(--kui-gray);
  --gray-50: var(--kui-band);
  --gray-100: var(--kui-band);
  --gray-200: var(--kui-hair-2);
  --gray-900: var(--kui-ink);
  --help-bg: var(--kui-white);
  --card-bg: var(--kui-white);
  --border-color: var(--kui-hair-2);
  --code-bg: var(--kui-band);
  --shadow-lg: var(--kui-shadow-card);
  --shadow-xl: var(--kui-shadow-card);
}
html, body { background: var(--kui-white); }
body { font-family: var(--kui-font-text) !important; color: var(--kui-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--kui-font-display); letter-spacing: var(--kui-track-head); text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--kui-accent); }
::selection { background: var(--kui-mint); }

/* header → floating pill */
.header {
  position: sticky !important; top: .55rem; z-index: 50; background: transparent !important; box-shadow: none !important; border: 0 !important;
  padding: .55rem 0 0 !important;
}
.header .container { max-width: var(--kui-wrap) !important; }
.header-content {
  min-height: 58px; padding: .4rem .6rem .4rem .9rem !important; border-radius: 999px;
  background: rgb(255 255 255 / .82); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--kui-hair-2); box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 14px 34px -20px rgb(0 0 0 / .22);
}
.header .logo { font-family: var(--kui-font-display); font-weight: 650; color: var(--kui-ink) !important; gap: .55rem; }
.header .logo img { width: 30px !important; height: 30px !important; border-radius: 9px; }
.nav-links a { color: var(--kui-ink-2) !important; font-size: .88rem; border-radius: 999px; padding: .5rem .75rem; }
.nav-links a:hover, .nav-links a.active { color: var(--kui-accent-2) !important; background: color-mix(in srgb, var(--kui-accent) 11%, transparent); }
.nav-links a.cta-btn, .cta-btn {
  background: var(--kui-accent) !important; color: #fff !important; border-radius: 999px !important; box-shadow: none !important;
}
.nav-links a.cta-btn:hover, .cta-btn:hover { background: var(--kui-accent-2) !important; }
.language-switcher-current { border-radius: 999px !important; font-family: var(--kui-font-label); }
.language-switcher-dropdown { border-radius: var(--kui-r-md) !important; box-shadow: var(--kui-shadow-card), 0 24px 48px -20px rgb(0 0 0 / .25) !important; }

/* hero + cards */
.help-hero, .page-hero {
  background: linear-gradient(135deg, var(--kui-band) 0%, #ecfdf5 100%) !important; color: var(--kui-ink) !important;
  border-radius: 0 0 var(--kui-r-xl) var(--kui-r-xl);
}
.help-hero h1, .help-hero p, .page-hero h1, .page-hero p { color: var(--kui-ink) !important; }
.help-hero h1, .page-hero h1 { font-weight: 650; letter-spacing: var(--kui-track-display); }
.gradient-text { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--kui-accent) !important; }
.help-search input { border-radius: 999px !important; border: 1px solid var(--kui-hair) !important; font-family: var(--kui-font-text); }
.category-card, .related-card, .faq-item, .info-box, .tip-box, .card {
  border-radius: var(--kui-r-md) !important; border: 1px solid var(--kui-hair-2) !important; box-shadow: none !important;
}
.category-card:hover, .related-card:hover { border-color: var(--kui-accent) !important; transform: translateY(-2px); }
.category-icon { border-radius: 14px !important; background: var(--kui-mint) !important; color: var(--kui-accent-2) !important; }
.category-card.info .category-icon, .category-card.secondary .category-icon { background: #fff1e6 !important; color: var(--kui-amber) !important; }
.help-cta { border-radius: var(--kui-r-xl) !important; background: linear-gradient(135deg, var(--kui-band) 0%, #ecfdf5 100%) !important; color: var(--kui-ink) !important; }
.help-cta h2, .help-cta p { color: var(--kui-ink) !important; }
.breadcrumbs a { color: var(--kui-accent); }

/* footer */
.footer { background: var(--kui-band) !important; color: var(--kui-gray) !important; border-top: 0 !important; }
.footer h3, .footer h4, .footer .footer-brand { color: var(--kui-ink) !important; }
.footer a { color: var(--kui-gray) !important; }
.footer a:hover { color: var(--kui-ink) !important; }