/*
 * Inventur component layer — bound to the governing Design System tokens (design-system.css,
 * loaded first). This file adds NO literal colours: it aliases the component-layer variable names to
 * the DS semantic tokens so every component adopts the prototype palette, type and elevation.
 * Element resets (body, headings) come from the DS base.css.
 */
:root {
  /* Brand — map component names onto the DS purple ramp + magenta accent + ink. */
  --brand-ink: var(--ink);
  --brand-primary: var(--brand);          /* --purple-700 */
  --brand-mid: var(--purple-500);
  --brand-light: var(--purple-300);
  --brand-accent: var(--accent);          /* --magenta-500 */

  /* Surface: dark sections use the DS ink gradient; hero uses --gradient-brand explicitly. */
  --surface-on-dark: var(--gradient-ink);

  /* State — bind the component triples to the DS status ramps (bg 50 / fg 700 / border 500). */
  --state-success-bg: var(--success-50); --state-success-fg: var(--success-700); --state-success-bd: var(--success-500);
  --state-warning-bg: var(--warning-50); --state-warning-fg: var(--warning-700); --state-warning-bd: var(--warning-500);
  --state-danger-bg:  var(--danger-50);  --state-danger-fg:  var(--danger-700);  --state-danger-bd:  var(--danger-500);
  --state-info-bg:    var(--purple-50);  --state-info-fg:    var(--purple-700);  --state-info-bd:    var(--purple-500);
  --state-neutral-bg: var(--neutral-100); --state-neutral-fg: var(--neutral-700); --state-neutral-bd: var(--neutral-400);
}

a { color: var(--text-brand); }

/* Visible focus indicator meeting non-text contrast (§11.4) */
:focus-visible {
  outline: 3px solid var(--brand-mid);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--brand-primary); color: var(--text-on-dark);
  padding: 0.5rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* Kicker / mono labels (uppercase, wide tracking) */
.kicker, .mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }

/* Panel — header + body, 1px border, never nested (§11.2) */
.panel {
  background: var(--surface-card);
  border: 1px solid var(--state-neutral-bd);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  margin-bottom: 1.5rem;
}
.panel > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--surface-soft);
}
.panel > header h2 { margin: 0; font-size: 1.15rem; }
.panel > header .subtitle { font-family: var(--font-mono); color: var(--text-subtle); font-size: 0.8rem; }
.panel > .panel-body { padding: 1.25rem; }

/* Chip — uppercase mono, one of five state tones, optional leading dot */
.chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.7rem; padding: 0.2em 0.6em; border-radius: 999px; border: 1px solid;
}
.chip::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 999px; background: currentColor; }
.chip.no-dot::before { display: none; }
.chip--success { background: var(--state-success-bg); color: var(--state-success-fg); border-color: var(--state-success-bd); }
.chip--warning { background: var(--state-warning-bg); color: var(--state-warning-fg); border-color: var(--state-warning-bd); }
.chip--danger  { background: var(--state-danger-bg);  color: var(--state-danger-fg);  border-color: var(--state-danger-bd); }
.chip--info    { background: var(--state-info-bg);    color: var(--state-info-fg);    border-color: var(--state-info-bd); }
.chip--neutral { background: var(--state-neutral-bg); color: var(--state-neutral-fg); border-color: var(--state-neutral-bd); }

/* Route binding badge */
.route-binding { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-subtle); }
.route-binding--internal { font-style: italic; }

/* Evidence label */
.evidence-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-brand); }

/* KPI card — figure, label, optional comparison; never more than four across */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.kpi { background: var(--surface-soft); border-radius: var(--radius-lg); padding: 1rem 1.25rem; }
.kpi .figure { font-family: var(--font-display); font-size: 2rem; color: var(--text-strong); }
.kpi .label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); }

/* SLA indicator — derived state; colour paired with text (§11.4) */
.sla { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; }
.sla--ok::before { content: "\2714"; color: var(--state-success-fg); }
.sla--warning::before { content: "\26A0"; color: var(--state-warning-fg); }
.sla--breached::before { content: "\2716"; color: var(--state-danger-fg); }

/* Tables — uppercase mono headers with wide tracking */
table.data { width: 100%; border-collapse: collapse; }
table.data th {
  text-align: left; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.72rem; color: var(--text-subtle); padding: 0.6rem 0.75rem; border-bottom: 2px solid var(--surface-soft);
}
table.data td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--surface-soft); }
table.data tbody tr:hover { background: var(--surface-soft); }

/* Buttons — target sizes meet the 2.2 minimum (§11.4) */
.btn {
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 44px; padding: 0.5rem 1.1rem; border-radius: var(--radius-md);
  font: inherit; font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none;
}
.btn--primary { background: var(--brand-primary); color: var(--text-on-dark); }
.btn--primary:hover { background: var(--brand-mid); }
.btn--ghost { background: transparent; color: var(--text-brand); border-color: var(--state-neutral-bd); }

/* Forms */
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 44px; padding: 0.5rem 0.75rem;
  border: 1px solid var(--state-neutral-bd); border-radius: var(--radius-md); font: inherit;
}
.field .error { color: var(--state-danger-fg); font-size: 0.85rem; }
.error-summary { background: var(--state-danger-bg); border: 1px solid var(--state-danger-bd); color: var(--state-danger-fg); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem; }