/* Agriware by Lightswitch — UI tokens and components.
   Source of truth: lightswitch.co.ke/brand/logo/agriware/README.md ("Product UI tokens").
   Orange is a brand accent only (the signature strip); warnings use --hak-warning, never Switch Orange. */

@font-face { font-family: "Sora"; src: url("/fonts/sora-700.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/fonts/sora-600.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/dmsans-500.woff") format("woff"); font-weight: 500; font-display: swap; }

:root {
  --hak-ink: #0B2E1C;
  --hak-ink-muted: #55675C;
  --hak-green: #119447;
  --hak-green-deep: #0A6530;
  --hak-green-tint: #E7F4EC;
  --hak-orange: #FF7A1A;
  --hak-paper: #FFFFFF;
  --hak-surface: #F5F8F6;
  --hak-line: #D9E3DC;
  --hak-danger: #B42318;
  --hak-danger-tint: #FDECEA;
  --hak-warning: #B54708;
  --hak-warning-tint: #FEF3E2;
  --hak-on-green: #FFFFFF;
  --hak-radius: 10px;
  --hak-font-head: "Sora", system-ui, sans-serif;
  --hak-font-ui: "DM Sans", system-ui, sans-serif;
  --hak-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hak-ink: #E8F1EB;
    --hak-ink-muted: #9DB1A5;
    --hak-green: #3BCB74;
    --hak-green-deep: #1FB25A;
    --hak-green-tint: #123A26;
    --hak-paper: #0B2E1C;
    --hak-surface: #10301F;
    --hak-line: #24493A;
    --hak-danger: #F97066;
    --hak-danger-tint: #3A1714;
    --hak-warning: #FDB022;
    --hak-warning-tint: #3A2A0E;
    --hak-on-green: #0B2E1C;
    color-scheme: dark;
  }
}
/* Theme swap for logos; !important so layout rules such as .auth-card .logo cannot re-show the hidden one. */
.logo-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  .logo-light { display: none !important; }
  .logo-dark { display: revert !important; }
  .auth-card .logo.logo-dark { display: block !important; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--hak-paper); color: var(--hak-ink);
  font: 16px/1.5 var(--hak-font-body);
}
h1, h2, h3 { font-family: var(--hak-font-head); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; font-weight: 600; }
a { color: var(--hak-green-deep); }
@media (prefers-color-scheme: dark) { a { color: var(--hak-green); } }
p { margin: 0 0 1em; }
.muted { color: var(--hak-ink-muted); }
.small { font-size: .875rem; }

/* Signature strip: brand green then Switch Orange, as on the social card. */
.strip { height: 5px; background: linear-gradient(90deg, var(--hak-green) 0 62%, var(--hak-orange) 62% 100%); }

/* Shell */
.topbar {
  display: flex; align-items: center; gap: 16px; padding: 10px 16px;
  border-bottom: 1px solid var(--hak-line); background: var(--hak-paper);
}
.topbar .brand img { display: block; height: 34px; width: auto; }
.topbar .spacer { flex: 1; }
.topbar .who { font: 500 .875rem var(--hak-font-ui); color: var(--hak-ink-muted); }
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: calc(100vh - 60px); }
.sidenav { border-right: 1px solid var(--hak-line); background: var(--hak-surface); padding: 16px 10px; }
.sidenav a {
  display: block; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px;
  color: var(--hak-ink); text-decoration: none; font: 500 .95rem var(--hak-font-ui);
}
.sidenav a:hover { background: var(--hak-green-tint); }
.sidenav a[aria-current="page"] { background: var(--hak-green); color: var(--hak-on-green); }
.sidenav .group { font: 500 .75rem var(--hak-font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--hak-ink-muted); padding: 14px 12px 6px; }
main.content { padding: 24px; max-width: 1200px; min-width: 0; }
.menu-toggle { display: none; }

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .sidenav { display: none; border-right: 0; border-bottom: 1px solid var(--hak-line); }
  .sidenav.open { display: block; }
  .menu-toggle { display: inline-flex; }
  main.content { padding: 16px; }
  .topbar .who { display: none; }
}

/* Cards and grids */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--hak-paper); border: 1px solid var(--hak-line); border-radius: var(--hak-radius); padding: 16px; }
.card.surface { background: var(--hak-surface); }
.stat .value { font: 700 1.8rem var(--hak-font-head); }
.stat .label { font: 500 .85rem var(--hak-font-ui); color: var(--hak-ink-muted); }
.section { margin-bottom: 28px; }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 16px; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--hak-line); border-radius: var(--hak-radius); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hak-line); vertical-align: top; }
th { background: var(--hak-surface); font: 500 .8rem var(--hak-font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--hak-ink-muted); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 600; background: var(--hak-surface); }

/* Forms */
form.stack { display: grid; gap: 12px; }
.fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
label { display: grid; gap: 4px; font: 500 .875rem var(--hak-font-ui); }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--hak-ink); background: var(--hak-paper);
  border: 1px solid var(--hak-line); border-radius: 8px; padding: 10px 12px; min-height: 44px; width: 100%;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hak-green) 45%, transparent); outline-offset: 1px; border-color: var(--hak-green);
}
.field-error, .validation-summary-errors { color: var(--hak-danger); font-size: .875rem; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }

/* Buttons: 48 px touch targets for field use (NFR-USE-02) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  padding: 10px 18px; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  font: 500 .95rem var(--hak-font-ui); text-decoration: none; white-space: nowrap;
  background: var(--hak-green); color: var(--hak-on-green);
}
.btn:hover { background: var(--hak-green-deep); }
.btn.secondary { background: transparent; color: var(--hak-ink); border-color: var(--hak-line); }
.btn.secondary:hover { background: var(--hak-green-tint); }
.btn.danger { background: var(--hak-danger); color: #fff; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: .85rem; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Badges and alerts */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 500 .78rem var(--hak-font-ui); background: var(--hak-green-tint); color: var(--hak-green-deep); }
@media (prefers-color-scheme: dark) { .badge { color: var(--hak-green); } }
.badge.danger { background: var(--hak-danger-tint); color: var(--hak-danger); }
.badge.warning { background: var(--hak-warning-tint); color: var(--hak-warning); }
.badge.muted { background: var(--hak-surface); color: var(--hak-ink-muted); }
.alert { padding: 12px 14px; border-radius: var(--hak-radius); border: 1px solid; margin-bottom: 16px; }
.alert.ok { background: var(--hak-green-tint); border-color: var(--hak-green); }
.alert.error { background: var(--hak-danger-tint); border-color: var(--hak-danger); color: var(--hak-ink); }
.alert.warn { background: var(--hak-warning-tint); border-color: var(--hak-warning); }

/* Checklist (setup console) */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checklist li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 14px; border: 1px solid var(--hak-line); border-radius: var(--hak-radius); }
.checklist .dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 .85rem var(--hak-font-head); border: 2px solid var(--hak-line); color: var(--hak-ink-muted); }
.checklist li.done .dot { background: var(--hak-green); border-color: var(--hak-green); color: var(--hak-on-green); }
.checklist li.next { border-color: var(--hak-green); box-shadow: inset 4px 0 0 var(--hak-green); }

/* Public pages */
.public { max-width: 760px; margin: 0 auto; padding: 32px 16px; }
.public .hero img { width: min(340px, 80%); height: auto; }
.auth-card { max-width: 420px; margin: 48px auto; padding: 0 16px; }
.auth-card .card { padding: 24px; }
.auth-card .logo { display: block; margin: 0 auto 20px; height: 46px; }
.notice { max-width: 520px; margin: 80px auto; padding: 0 16px; text-align: center; font: 1.05rem var(--hak-font-body); color: var(--hak-ink); }
.notice img { margin-bottom: 20px; }
.lang { display: inline-flex; gap: 4px; }
.lang button { background: none; border: 1px solid var(--hak-line); border-radius: 6px; padding: 4px 8px; font: 500 .8rem var(--hak-font-ui); color: var(--hak-ink); cursor: pointer; min-height: 32px; }
.lang button[aria-pressed="true"] { background: var(--hak-green); color: var(--hak-on-green); border-color: var(--hak-green); }
pre.issues { white-space: pre-wrap; margin: 6px 0 0; font: .85rem var(--hak-font-body); color: var(--hak-danger); }