/* ============================================================
   HARBOUR KIT — Atashi design-sheet foundation (Green, 2026-07-04)
   Self-hosted, no network: fonts + tokens + primitives in one place.
   Source of truth: atashi-harbour-sheet.html @ 6b455ea3 (tokens verbatim)
   + M3 five-button ladder + card trio + 7B binding standards.
   Scope: design sheets/comps under docs/uiux-overhaul/. Product adoption
   (frontend tokens.css/index.html swap to self-hosted) is a gated build task.
   ============================================================ */

/* fonts self-hosted via public/fonts (@font-face in index.html head) */

/* ---------- type ---------- */
:root{
  --disp:'Manrope',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  /* radius scale (call #12: pill = interactive family; scale for surfaces) */
  --r-xs:10px; --r-s:12px; --r-m:16px; --r-l:24px; --r-pill:99px;
}

/* ---------- theme tokens ---------- */
.k-harbour-dark{
  --bg:#0E2138; --elev:#112A46; --ground:#0A1626;
  --fg:#E9F1F9; --mut:#93A9BE;
  --hero:#ACC8E5; --onhero:#0E2138;
  --mint:#7FD4BE;
  --succ:#5BD6A1; --warn:#E8C268; --err:#FF8A85;
  --hair:rgba(172,200,229,.16); --line:rgba(172,200,229,.14);
  --ov:17,42,70;
  background:var(--bg); color:var(--fg);
}
.k-daylight{
  --bg:#EEF3F9; --elev:#FFFFFF; --ground:#E2EBF5;
  --fg:#112A46; --mut:#5B7186;
  --hero:#1D5C96; --onhero:#FFFFFF;
  --mint:#7FD4BE;
  --succ:#156940; --warn:#715A00; --err:#B3261E;
  --hair:rgba(17,42,70,.14); --line:rgba(17,42,70,.12);
  --ov:233,241,249;
  background:var(--bg); color:var(--fg);
}

/* ---------- buttons (pill family; all four states, 7B) ---------- */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--disp);font-size:13.5px;font-weight:800;letter-spacing:.01em;
  height:40px;min-width:44px;padding:0 18px;border-radius:var(--r-pill);
  border:none;cursor:pointer;background:transparent;color:var(--fg);
  transition:filter .15s ease,transform .15s ease}
.k-btn--primary{background:var(--hero);color:var(--onhero)}
.k-btn--secondary{border:1.5px solid var(--hair);color:var(--fg);box-shadow:inset 0 0 0 .5px var(--hair)}
.k-btn--ghost{color:var(--mut)}
.k-btn--danger{border:1.5px solid var(--err);color:var(--err)}
.k-btn--sq{border-radius:var(--r-s)}
.k-btn:hover{filter:brightness(1.08)}
.k-btn:active{transform:scale(.985);filter:brightness(.95)}
.k-btn:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.k-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(172,200,229,.45)}
.k-daylight .k-btn:focus-visible{box-shadow:0 0 0 3px rgba(29,92,150,.35)}

/* ---------- cards (one style product-wide, 7B) ---------- */
.k-card{background:var(--elev);border:1px solid var(--line);border-radius:var(--r-m);padding:16px}

/* ---------- inputs (labels visible, 44px targets, all four states) ---------- */
.k-field{margin-bottom:14px}
.k-field label{display:block;font-family:var(--disp);font-size:12px;font-weight:700;margin-bottom:6px;color:var(--mut)}
.k-input{width:100%;height:44px;border-radius:var(--r-s);padding:0 14px;
  font-family:var(--body);font-size:15px;border:1.5px solid var(--hair);
  background:transparent;color:var(--fg)}
.k-input:focus-visible{outline:none;border-color:var(--hero);box-shadow:0 0 0 3px rgba(172,200,229,.25)}
.k-daylight .k-input:focus-visible{box-shadow:0 0 0 3px rgba(29,92,150,.2)}
.k-input[aria-invalid="true"]{border-color:var(--err)}
.k-input:disabled{opacity:.45}
.k-field .k-error{color:var(--err);font-size:12px;margin-top:6px;display:flex;gap:6px;align-items:center}

/* ---------- status chips (never colour-alone: icon + label required, 7B) ---------- */
.k-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);
  font-size:11.5px;font-weight:700;border-radius:var(--r-pill);padding:4px 11px;white-space:nowrap}
.k-chip--success{color:var(--succ);border:1px solid color-mix(in srgb,var(--succ) 40%,transparent)}
.k-chip--warning{color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.k-chip--error{color:var(--err);border:1px solid color-mix(in srgb,var(--err) 40%,transparent)}

/* ---------- motion floor ---------- */
@media (prefers-reduced-motion:reduce){
  .k-btn{transition:none}
  .k-btn:active{transform:none}
}