/* === fonts.css === */
/* Plus Jakarta Sans — the app's typeface (weights 400–800). */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* === tokens.css === */
/* Design tokens for the Housekeeping system.
   Extracted and formalized from the app's inline styles. All tokens are
   namespaced `--hk-*` so they never collide with host-page variables. */
:root {
  /* Ink / neutral scale */
  --hk-ink: #0f172a;        /* primary text, headings */
  --hk-muted: #64748b;      /* secondary text, labels */
  --hk-faint: #94a3b8;      /* tertiary text, units, placeholders */
  --hk-line: #e7ebf2;       /* default borders */
  --hk-line-soft: #eef1f7;  /* subtle inner borders / dividers */

  /* Surfaces */
  --hk-surface: #ffffff;    /* cards, inputs */
  --hk-surface-sunken: #f8fafc; /* nested rows, wells */
  --hk-canvas: #f4f7fc;     /* page background */

  /* Brand */
  --hk-indigo: #4f46e5;
  --hk-blue: #2563eb;
  --hk-cyan: #06b6d4;
  --hk-accent: #2563eb;     /* primary interactive color */
  --hk-accent-ink: #1e3a8a; /* brand text on light */
  --hk-brand-gradient: linear-gradient(120deg, #4f46e5 0%, #2563eb 58%, #06b6d4 100%);

  /* Semantic (paired solid + soft background) */
  --hk-good: #059669;       --hk-good-soft: #ecfdf5;
  --hk-amber: #d97706;      --hk-amber-soft: #fffbeb;
  --hk-warn: #dc2626;       --hk-warn-soft: #fef2f2;

  /* Radii */
  --hk-radius-sm: 8px;
  --hk-radius-md: 11px;
  --hk-radius-lg: 13px;
  --hk-radius-xl: 16px;
  --hk-radius-pill: 999px;

  /* Elevation */
  --hk-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -26px rgba(15, 23, 42, .28);
  --hk-shadow-btn: 0 16px 28px -14px rgba(37, 99, 235, .55);

  /* Focus */
  --hk-focus-ring: 0 0 0 3px rgba(37, 99, 235, .18);

  /* Typography */
  --hk-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* === components.css === */
/* Component styles for the Housekeeping design system.
   Class vocabulary is `hk-<component>` with BEM-ish modifiers (`--variant`).
   Visual values are lifted from the app's inline styles and expressed in tokens. */

/* ---------- Button ---------- */
.hk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--hk-radius-lg);
  font-family: var(--hk-font-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s, filter .15s, background .15s, border-color .15s, color .15s;
}
.hk-btn:focus-visible { outline: none; box-shadow: var(--hk-focus-ring); }
.hk-btn:disabled { opacity: .5; cursor: not-allowed; }
.hk-btn svg { width: 16px; height: 16px; }

.hk-btn--primary {
  background: var(--hk-brand-gradient);
  color: #fff;
  box-shadow: var(--hk-shadow-btn);
}
.hk-btn--primary:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.06); }

.hk-btn--ghost {
  background: var(--hk-surface);
  color: var(--hk-ink);
  border-color: var(--hk-line);
}
.hk-btn--ghost:not(:disabled):hover { background: var(--hk-surface-sunken); border-color: var(--hk-faint); }

.hk-btn--subtle {
  background: var(--hk-surface-sunken);
  color: var(--hk-accent-ink);
}
.hk-btn--subtle:not(:disabled):hover { filter: brightness(.98); }

.hk-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.hk-btn--lg { height: 48px; padding: 0 22px; font-size: 15px; }

/* ---------- IconButton ---------- */
.hk-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  min-width: 38px;
  padding: 0 13px;
  border: 1px solid var(--hk-line);
  border-radius: var(--hk-radius-md);
  background: var(--hk-surface);
  color: var(--hk-ink);
  font-family: var(--hk-font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hk-icon-btn:hover { background: var(--hk-surface-sunken); }
.hk-icon-btn:focus-visible { outline: none; box-shadow: var(--hk-focus-ring); }
.hk-icon-btn--bare { border-color: transparent; background: transparent; padding: 0 10px; }
.hk-icon-btn svg { width: 15px; height: 15px; }

/* ---------- Card ---------- */
.hk-card {
  background: var(--hk-surface);
  border: 1px solid var(--hk-line);
  border-radius: var(--hk-radius-xl);
  box-shadow: var(--hk-shadow-card);
  padding: 16px 18px;
}
.hk-card__title { font-size: 13px; font-weight: 700; color: var(--hk-ink); margin: 0; }
.hk-card__subtitle { font-size: 12px; color: var(--hk-muted); margin: 1px 0 0; }
.hk-card__head { margin-bottom: 14px; }

/* ---------- Badge / Pill ---------- */
.hk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--hk-radius-pill);
  font-family: var(--hk-font-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.hk-badge--neutral { background: var(--hk-surface-sunken); color: var(--hk-muted); }
.hk-badge--good { background: var(--hk-good-soft); color: var(--hk-good); }
.hk-badge--amber { background: var(--hk-amber-soft); color: var(--hk-amber); }
.hk-badge--warn { background: var(--hk-warn-soft); color: var(--hk-warn); }
.hk-badge--accent { background: #eff4ff; color: var(--hk-accent); }

/* ---------- Toggle ---------- */
.hk-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border: 0;
  border-radius: var(--hk-radius-pill);
  background: #cbd5e1;
  position: relative;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: background .15s;
}
.hk-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: left .18s;
}
.hk-toggle:checked { background: var(--hk-accent); }
.hk-toggle:checked::after { left: 18px; }
.hk-toggle:focus-visible { outline: none; box-shadow: var(--hk-focus-ring); }
.hk-toggle:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- SegmentedNav ---------- */
.hk-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--hk-radius-md);
  background: var(--hk-surface-sunken);
  border: 1px solid var(--hk-line);
}
.hk-segmented__item {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--hk-font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--hk-muted);
  padding: 6px 12px;
  border-radius: var(--hk-radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.hk-segmented__item:hover { color: var(--hk-ink); }
.hk-segmented__item--on { background: var(--hk-surface); color: var(--hk-accent-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }

/* ---------- StatBlock ---------- */
.hk-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 16px;
  border-radius: var(--hk-radius-lg);
  background: var(--hk-surface);
  border: 1px solid var(--hk-line);
  min-width: 96px;
}
.hk-stat__value { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--hk-ink); }
.hk-stat__label { font-size: 11px; font-weight: 500; color: var(--hk-muted); }
.hk-stat--brand { background: var(--hk-brand-gradient); border-color: transparent; }
.hk-stat--brand .hk-stat__value { color: #fff; }
.hk-stat--brand .hk-stat__label { color: rgba(255, 255, 255, .78); }

/* ---------- Input ---------- */
.hk-field { display: flex; flex-direction: column; gap: 7px; }
.hk-field__label {
  font-family: var(--hk-font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hk-muted);
}
.hk-input {
  height: 44px;
  border: 1.5px solid var(--hk-line);
  border-radius: var(--hk-radius-md);
  padding: 0 14px;
  font-family: var(--hk-font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--hk-ink);
  background: var(--hk-surface);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.hk-input::placeholder { color: var(--hk-faint); }
.hk-input:focus { outline: none; border-color: var(--hk-accent); box-shadow: var(--hk-focus-ring); }
.hk-input:disabled { opacity: .6; cursor: not-allowed; }
.hk-input--invalid { border-color: var(--hk-warn); }
.hk-field__error { font-size: 12.5px; font-weight: 600; color: var(--hk-warn); min-height: 16px; }