/* ==========================================================================
   Warnitor Design System — components.css  (v1.0)
   Requires tokens.css. Plain CSS, framework-agnostic. Class prefix: wn-
   ========================================================================== */

/* ---- Layout -------------------------------------------------------------- */
.wn-container { max-width: var(--wn-container); margin-inline: auto; padding-inline: var(--wn-gutter); }
.wn-section   { padding-block: var(--wn-section-y); }
.wn-band      { background: var(--wn-bg-band); border-block: 1px solid var(--wn-line); }

/* ---- Headings ------------------------------------------------------------ */
.wn-display, .wn-h1, .wn-h2, .wn-h3 {
  font-family: var(--wn-font-display); font-weight: var(--wn-weight-bold);
  letter-spacing: var(--wn-tracking-display); text-wrap: balance; margin: 0;
}
.wn-display { font-size: var(--wn-text-display); line-height: var(--wn-leading-tight); }
.wn-h1 { font-size: var(--wn-text-h1); line-height: var(--wn-leading-tight); }
.wn-h2 { font-size: var(--wn-text-h2); line-height: 1.05; }
.wn-h3 { font-size: var(--wn-text-h3); line-height: var(--wn-leading-heading); }
.wn-lead { font-size: var(--wn-text-lead); line-height: 1.55; color: var(--wn-text-3); max-width: 34em; }
.wn-accent-text { color: var(--wn-accent); }   /* emphasis by color, never gradient */

/* ---- Buttons ------------------------------------------------------------- */
.wn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--wn-control-md); padding: 10px 18px; box-sizing: border-box;
  font: var(--wn-weight-semibold) var(--wn-text-ui)/1 var(--wn-font-sans);
  border-radius: var(--wn-radius-md); border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color var(--wn-dur-base) var(--wn-ease-out), border-color var(--wn-dur-base), color var(--wn-dur-base);
}
.wn-btn--lg { min-height: var(--wn-control-lg); padding: 15px 26px; font-size: var(--wn-text-body); border-radius: var(--wn-radius-lg); }
.wn-btn--sm { min-height: var(--wn-control-sm); padding: 8px 14px; font-size: var(--wn-text-caption); }
.wn-btn--primary { background: var(--wn-accent); color: var(--wn-on-accent); }
.wn-btn--primary:hover { background: var(--wn-accent-hover); color: var(--wn-on-accent); }
.wn-btn--primary:active { background: var(--wn-accent-press); }
.wn-btn--ghost { background: transparent; color: var(--wn-text); border-color: var(--wn-line-control); font-weight: var(--wn-weight-medium); }
.wn-btn--ghost:hover { border-color: var(--wn-text); color: var(--wn-text); }
.wn-btn--danger { background: transparent; color: var(--wn-down-text); border-color: var(--wn-down); }
.wn-btn:disabled, .wn-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.wn-btn--block { width: 100%; }

/* ---- Status indicator (shape + color, never color alone) ------------------ */
.wn-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--wn-text-caption); }
.wn-status::before { content: ""; flex: none; }
.wn-status--up::before     { width: 8px; height: 8px; border-radius: 50%; background: var(--wn-up); }
.wn-status--warn::before   { width: 8px; height: 8px; border-radius: 2px; background: var(--wn-warn); }
.wn-status--down::before   { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--wn-down); }
.wn-status--paused::before { width: 10px; height: 10px; border-radius: 50%; border: 2px dashed var(--wn-paused); box-sizing: border-box; }

/* ---- Badges -------------------------------------------------------------- */
.wn-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--wn-radius-sm); font-size: var(--wn-text-caption); font-weight: var(--wn-weight-semibold); line-height: 1.2; }
.wn-badge--resolved { background: var(--wn-accent-deep); color: var(--wn-accent); }
.wn-badge--neutral  { background: var(--wn-surface-3); color: var(--wn-text-2); border: 1px solid var(--wn-line-strong); }
.wn-badge--low      { color: var(--wn-risk-low);      border: 1px solid currentColor; }
.wn-badge--medium   { color: var(--wn-risk-medium);   border: 1px solid currentColor; }
.wn-badge--high     { color: var(--wn-risk-high);     border: 1px solid currentColor; }
.wn-badge--critical { background: var(--wn-risk-critical); color: #1A0508; }

/* ---- Chip (tech tokens, log sources) -------------------------------------- */
.wn-chip { font-family: var(--wn-font-mono); font-size: var(--wn-text-caption); padding: 7px 12px; border: 1px solid #343944; border-radius: var(--wn-radius-sm); color: var(--wn-text-2); }

/* ---- Card / panel -------------------------------------------------------- */
.wn-panel { background: var(--wn-surface-2); border: 1px solid var(--wn-line-strong); border-radius: var(--wn-radius-2xl); box-shadow: var(--wn-shadow-panel); overflow: hidden; }
.wn-card  { background: var(--wn-surface-2); border: 1px solid var(--wn-line-strong); border-radius: var(--wn-radius-xl); padding: 32px; }
.wn-card--featured { border-color: var(--wn-accent); }
.wn-placeholder { border: 1px dashed var(--wn-line-control); border-radius: var(--wn-radius-lg); color: var(--wn-text-subtle); }

/* ---- Spec row (feature list as table rows, not card grid) ----------------- */
.wn-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 48px; padding: 28px 0; border-bottom: 1px solid var(--wn-line-strong); }
.wn-spec__meta { font-family: var(--wn-font-mono); font-size: var(--wn-text-caption); color: var(--wn-text-subtle); line-height: 1.8; }

/* ---- Forms --------------------------------------------------------------- */
.wn-field { display: flex; flex-direction: column; gap: 8px; }
.wn-label { font-size: var(--wn-text-ui); font-weight: var(--wn-weight-semibold); color: var(--wn-text); }
.wn-hint  { font-size: var(--wn-text-caption); color: var(--wn-text-subtle); }
.wn-input, .wn-select, .wn-textarea {
  min-height: var(--wn-control-md); box-sizing: border-box; width: 100%;
  padding: 10px 14px; background: var(--wn-bg); color: var(--wn-text);
  font: var(--wn-weight-regular) var(--wn-text-ui)/1.4 var(--wn-font-sans);
  border: 1px solid var(--wn-line-control); border-radius: var(--wn-radius-md);
  transition: border-color var(--wn-dur-fast) var(--wn-ease-out);
}
.wn-input::placeholder, .wn-textarea::placeholder { color: var(--wn-text-subtle); }
.wn-input:hover, .wn-select:hover, .wn-textarea:hover { border-color: var(--wn-line-hover); }
.wn-input:focus, .wn-select:focus, .wn-textarea:focus { outline: none; border-color: var(--wn-accent); box-shadow: 0 0 0 3px var(--wn-accent-soft); }
.wn-input[aria-invalid="true"] { border-color: var(--wn-down); }
.wn-error { font-size: var(--wn-text-caption); color: var(--wn-down-text); }
.wn-checkbox { accent-color: var(--wn-accent); width: 18px; height: 18px; }

/* ---- Table (pricing comparison, asset lists) ------------------------------ */
.wn-table-wrap { overflow-x: auto; border: 1px solid var(--wn-line-strong); border-radius: var(--wn-radius-xl); }
.wn-table { width: 100%; border-collapse: collapse; font-size: var(--wn-text-ui); font-variant-numeric: tabular-nums; }
.wn-table th, .wn-table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--wn-line); }
.wn-table thead th { font-weight: var(--wn-weight-semibold); background: var(--wn-surface-2); }
.wn-table tbody th { font-weight: var(--wn-weight-regular); color: var(--wn-text-2); }
.wn-table .wn-table__group th { font-family: var(--wn-font-display); font-size: var(--wn-text-h5); color: var(--wn-text); padding-top: 28px; background: transparent; }

/* ---- Toast / alert ------------------------------------------------------- */
.wn-toast { display: flex; gap: 12px; align-items: flex-start; background: var(--wn-text); color: var(--wn-bg); border-radius: 12px; padding: 14px 16px; box-shadow: var(--wn-shadow-toast); font-size: 14px; line-height: 1.45; }

/* ---- Document (light paper: AI reports) ----------------------------------- */
.wn-doc { background: var(--wn-paper); color: var(--wn-paper-text); border-radius: var(--wn-radius-xl); padding: 36px; box-shadow: var(--wn-shadow-panel); font-size: 15px; }
.wn-doc h4 { margin: 0 0 6px; font-size: 14px; font-weight: var(--wn-weight-bold); }
.wn-doc p  { color: var(--wn-paper-text-2); }
.wn-doc code { background: #E3E7EC; padding: 1px 5px; border-radius: var(--wn-radius-xs); }

/* ---- Icons: 24px grid, 1.6 stroke, round caps (Lucide-compatible) -------- */
.wn-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }