/* =============================================================================
   Kanine — "Lovable refresh" (BRANCH EXPERIMENT: design/home-lovable-refresh)
   -----------------------------------------------------------------------------
   The designer (Lovable) export was keyed to our real kl-* classes + --k-* tokens,
   but it (a) re-themed the palette to warm-cream / teal-green, (b) minted a tighter
   spacing scale, (c) replaced the .ki icon font with placeholder squares.

   OWNER RULING: keep our navy + signal-teal BRAND, take the LAYOUT. So this file does
   NOT redefine any palette token (the foundation's navy/teal win on cascade) and does
   NOT touch .ki (FontAwesome stays). It carries only the SYSTEM-level lift that is safe
   app-wide — premium elevation, an ambient brand background, refreshed buttons — plus
   the additive spacing steps the new layout consumes. The aggressive tight spacing is
   SCOPED to the home page (the one surface carrying .kl-home-dash) so no other page
   reflows. Loaded LAST so its tokens win on ties.

   REVERT THE WHOLE EXPERIMENT: delete this file + its <link> in App.razor, and
   `git checkout main -- src/Kanine.Web/Components/Pages/Home.razor.css` (and remove
   DraftsPanel.razor.css).
   ========================================================================== */

:root {
  /* Additive spacing steps the new layout consumes (the foundation scale skips these). */
  --k-space-5: 10px;
  --k-space-7: 16px;
  --k-space-9: 24px;
  --k-space-10: 32px;
  --k-space-11: 40px;

  /* Premium, layered elevation — a safe app-wide depth lift (palette-independent). */
  --k-elev-1: 0 1px 0 rgb(0 0 0 / .04), 0 1px 2px rgb(0 0 0 / .05);
  --k-elev-2: 0 2px 4px rgb(0 0 0 / .06), 0 8px 24px -12px rgb(0 0 0 / .12);
  --k-elev-3: 0 4px 12px rgb(0 0 0 / .10), 0 24px 48px -16px rgb(0 0 0 / .20);
}
html.dark {
  --k-elev-1: 0 1px 0 rgb(0 0 0 / .40), 0 1px 2px rgb(0 0 0 / .50);
  --k-elev-2: 0 2px 6px rgb(0 0 0 / .50), 0 12px 28px -12px rgb(0 0 0 / .60);
  --k-elev-3: 0 6px 18px rgb(0 0 0 / .55), 0 28px 60px -18px rgb(0 0 0 / .75);
}

/* Ambient brand wash behind the shell — resolves through OUR palette tokens, so it reads
   as a faint navy/teal glow on the cool paper (light) or deep navy (dark), never warm. */
body {
  background:
    radial-gradient(1200px 600px at 82% -12%, color-mix(in oklab, var(--k-accent) 10%, transparent), transparent 60%),
    radial-gradient(900px 520px at -12% 112%, color-mix(in oklab, var(--k-accent-bright) 8%, transparent), transparent 55%),
    var(--k-bg);
  background-attachment: fixed;
}

/* The new layout's tight rhythm + softer radii — SCOPED to the home page only (it is the
   one surface carrying .kl-home-dash), so every other page keeps the foundation scale.
   Custom properties inherit down the DOM, so the home-scoped kl-* rules read these. */
.kl-shell-main:has(.kl-home-dash) {
  --k-space-1: 2px;  --k-space-2: 4px;  --k-space-3: 6px;  --k-space-4: 8px;
  --k-space-5: 10px; --k-space-6: 12px; --k-space-7: 16px; --k-space-8: 20px;
  --k-space-9: 24px; --k-space-10: 32px; --k-space-11: 40px; --k-space-12: 56px;
  --k-radius-sm: 6px; --k-radius-md: 10px; --k-radius-lg: 16px;
}

/* -------- Buttons: app-wide refresh. a11y target size preserved via --k-touch (NOT the
   export's fixed 36px height, which would regress the WCAG target-size gate). ---------- */
.kl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;   /* so a width:100% button never spills past its container's padding */
  gap: var(--k-space-3, 6px);
  min-height: var(--k-touch, 44px);
  padding: 0 var(--k-space-7, 16px);
  font: 600 13px/1 var(--k-font-ui);
  border-radius: var(--k-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
  white-space: nowrap;
}
.kl-btn:active { transform: translateY(1px); }
.kl-btn--primary {
  background: var(--k-accent); color: var(--k-on-accent);
  border-color: color-mix(in oklab, var(--k-accent) 62%, #000);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--k-accent) 40%, #000),
              0 8px 18px -10px color-mix(in oklab, var(--k-accent) 70%, transparent);
}
.kl-btn--primary:hover { background: var(--k-accent-bright); }
.kl-btn--secondary {
  background: var(--k-surface-2); color: var(--k-text); border-color: var(--k-border);
}
.kl-btn--secondary:hover { border-color: var(--k-accent); color: var(--k-accent); }
.kl-btn--ghost { background: transparent; color: var(--k-text-muted); border-color: transparent; }
.kl-btn--ghost:hover { color: var(--k-text); background: var(--k-surface-2); }
.kl-btn--danger {
  background: color-mix(in oklab, var(--k-critical) 12%, var(--k-surface));
  color: var(--k-critical);
  border-color: color-mix(in oklab, var(--k-critical) 40%, transparent);
}
.kl-btn--danger:hover { background: var(--k-critical); color: #fff; border-color: transparent; }

::selection { background: color-mix(in oklab, var(--k-accent) 35%, transparent); }