/* © 2026 Kingsleigh Homes Limited. All rights reserved.
   Proprietary and confidential. Unauthorised copying, distribution, modification
   or use of this file or its contents, in whole or in part, via any medium, is
   strictly prohibited without the prior written permission of Kingsleigh Homes Limited. */
/* =============================================================================
   Kingsleigh Portal — shared design-system layer (Workstream 1: One System, Two Voices)
   Tokens + status treatment ported from kingsleigh-ops/web/kh-ui.css (keep reconciled).
   Load this AFTER any page stylesheet so the legacy brass aliases below win.
   ============================================================================= */
@import url("/tokens.css");   /* THE CONSTITUTION — self-hosted fonts + --kh-* ramp/geometry/motion.
                                 ds.css re-declares cream-voice semantics BELOW and wins by load order. */
:root{
  /* Gold — THE ONE ACCENT (brass retired) */
  --kh-gold:#C6A14C;        /* primary action / accent */
  --kh-gold-hover:#B8923F;  /* gold button hover */
  --kh-gold-deep:#9A7B2E;   /* gold text on light */
  --kh-gold-soft:#F7F0DD;   /* gold tint background */
  --kh-gold-bright:#E9C877; /* gold on navy/dark */
  /* Navy / ink / cream */
  --kh-navy:#20283A; --kh-ink:#20283A; --kh-muted:#716E62;
  --kh-cream:#F3F0E9; --kh-paper:#FBFAF6; --kh-paper-2:#F7F5EF; --kh-sand:#EFEBE1;
  --kh-line:#E7E2D7; --kh-line-2:#D9D2C4;
  /* Semantic RAG */
  --kh-ok:#3F7D5A;   --kh-ok-soft:#E8F0EA;
  --kh-warn:#BD832A; --kh-warn-soft:#F7EEDC;
  --kh-risk:#B0432E; --kh-risk-soft:#F6E7E1;
  --kh-live:#61C554;
  /* Type: Hanken Grotesk = ALL UI/body/tables/controls.
     Serif (Cormorant Garamond) is display-only — client-facing headlines & documents. */
  --kh-font:'Hanken Grotesk',system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* Legacy aliases — repoint the retired second-brand vars (from the old site
     stylesheet) onto the gold ramp so no portal page can render brass. */
  --brass:var(--kh-gold);
  --brass-dark:var(--kh-gold-deep);
  --gold-l:var(--kh-gold-bright);
  --cream:var(--kh-cream);
  --sans:var(--kh-font);
}

/* ---- UI typography: body, tables and controls are Hanken Grotesk ---------- */
body,button,input,select,textarea,table{font-family:var(--kh-font)}
/* Small headings are UI, not display — serif stays only on h1/h2 + doc titles */
h3,h4,h5,h6{font-family:var(--kh-font)}
.kstat .kv,.kbreak h4{font-family:var(--kh-font)} /* stat numbers/data: never serif */

/* ---- Status pills (ported from kh-ui.css) --------------------------------- */
.kh-pill{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--kh-font);
  padding:5px 10px;border-radius:999px}
.kh-pill--ok{background:var(--kh-ok-soft);color:var(--kh-ok)}
.kh-pill--warn{background:var(--kh-warn-soft);color:var(--kh-warn)}
.kh-pill--risk{background:var(--kh-risk-soft);color:var(--kh-risk)}
.kh-pill--gold{background:var(--kh-gold-soft);color:var(--kh-gold-deep)}
.kh-pill--neutral{background:var(--kh-sand);color:var(--kh-muted)}
.kh-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.kh-dot--live{background:var(--kh-live);animation:khPulse 2.2s ease infinite}
@keyframes khPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- Loading states (ported from kh-ui.css) ------------------------------- */
.kh-skel{background:linear-gradient(90deg,var(--kh-sand) 25%,var(--kh-paper-2) 37%,var(--kh-sand) 63%);
  background-size:400% 100%;animation:khShimmer 1.4s ease infinite;border-radius:6px;min-height:12px}
.kh-skel--line{height:12px;margin:7px 0}
.kh-skel--block{height:80px}
@keyframes khShimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.kh-spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--kh-line);
  border-top-color:var(--kh-gold);animation:khSpin .7s linear infinite;display:inline-block}
@keyframes khSpin{to{transform:rotate(360deg)}}

/* Respect reduced-motion (turns off khPulse/khShimmer for a11y) */
@media (prefers-reduced-motion: reduce){
  .kh-skel,.kh-spinner,.kh-dot--live{animation-duration:.001ms;animation-iteration-count:1}
}