/* ==========================================================================
   kaloria.ai /foods/ /recipes/ /compare/ (content engine) — reskin into the shared Kaloria design
   (2026-10-10). Loaded after base.html's inline styles. Light mode is remapped to the brand palette and
   OFL fonts; the engine's own dark-mode tokens stay untouched. Requires /assets/ui/kaloria-ui.css.
   ========================================================================== */
@media not (prefers-color-scheme: dark) {
  :root {
    --k-bg: var(--kui-white);
    --k-bg-panel: var(--kui-band);
    --k-bg-tint: #ecfdf5;
    --k-ink: var(--kui-ink);
    --k-soft: var(--kui-ink-2);
    --k-faint: var(--kui-gray);
    --k-rule: var(--kui-hair-2);
    --k-rule-ink: var(--kui-ink);
    --k-green: var(--kui-accent);
    --k-green-deep: var(--kui-accent-2);
    --k-amber: var(--kui-amber);
  }
}
:root {
  --k-r: 18px;
  --k-r-btn: 999px;
  --k-sans: var(--kui-font-text);
}
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--kui-font-display); letter-spacing: var(--kui-track-head); text-wrap: balance; font-weight: 650; }
h1 { letter-spacing: var(--kui-track-display); }
p { text-wrap: pretty; }

/* header → floating pill */
.k-header { top: 0; background: transparent; border-bottom: 0; padding-top: .55rem; }
.k-header .k-shell {
  border-radius: 999px; border: 1px solid var(--k-rule); padding-inline: 1rem .6rem;
  background: color-mix(in srgb, var(--k-bg) 84%, transparent);
  backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 14px 34px -20px rgb(0 0 0 / .22);
}
.k-logo { display: inline-flex; align-items: center; gap: 0; }
.k-logo::before { content: ""; inline-size: 30px; block-size: 30px; border-radius: 9px; flex: none; margin-inline-end: .55rem; background: url("/assets/ui/img/logo-192.png") center / cover no-repeat; }
.k-logo { font-family: var(--kui-font-display); font-weight: 650; letter-spacing: var(--kui-track-head); }
.k-logo b { color: inherit; font-weight: inherit; }
.k-btn { border-radius: 999px; font-weight: 500; padding: 10px 18px; }
.k-kicker { font-family: var(--kui-font-label); letter-spacing: var(--kui-track-label); }
.k-rail-cta, .k-cta, .k-app-cta { border-radius: var(--kui-r-lg); }
.k-byline { font-family: var(--kui-font-label); }
table { font-variant-numeric: tabular-nums; }