/* ============================================================================
   ik-components.css — shared, token-driven visual PRIMITIVES for the IK product.
   Load AFTER ik-tokens.css and BEFORE the surface stylesheet.
   Only genuinely reusable primitives live here (buttons, badges, alerts, form
   controls, card/table foundations, focus, empty states). Page-specific geometry
   and feature styling stay in the surface stylesheets. Every value comes from
   ik-tokens.css — no raw brand/status hex here.

   Namespaced `.ik-*` so adoption is opt-in and never collides with a surface's
   existing bespoke classes. Surfaces migrate their local button/badge/alert
   systems onto these primitives during their own phase (see REPO_COLOR_AUDIT.md).
   ========================================================================== */

/* ── Focus — one visible, accessible ring everywhere ─────────────────────── */
.ik-focusable:focus-visible,
.ik-btn:focus-visible,
.ik-field:focus-visible,
.ik-badge:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px var(--focus-ring);
  outline-offset:1px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────
   Base + brand/navy/violet/neutral/danger variants. On-brand text uses a
   fixed on-color so tenant/brand backgrounds never produce unreadable labels. */
.ik-btn{
  --_bg:var(--brand); --_fg:var(--text-on-brand); --_bd:transparent; --_bgh:var(--brand-hover);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:700; font-size:14px; line-height:1;
  padding:10px 18px; border-radius:10px; cursor:pointer;
  border:1.5px solid var(--_bd); background:var(--_bg); color:var(--_fg);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
  text-decoration:none;
}
.ik-btn:hover{ background:var(--_bgh); }
.ik-btn:active{ transform:translateY(1px); }
.ik-btn:disabled,.ik-btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none; }

.ik-btn--navy   { --_bg:var(--navy);   --_bgh:var(--navy-hover); }
.ik-btn--violet { --_bg:var(--violet); --_bgh:var(--violet-hover); }
.ik-btn--danger { --_bg:var(--danger); --_bgh:var(--danger); }
.ik-btn--tenant { --_bg:var(--tenant-brand); --_fg:var(--tenant-brand-on); --_bgh:var(--tenant-brand); }

/* Secondary / outline / ghost — neutral chrome, brand only on intent */
.ik-btn--outline{
  --_bg:transparent; --_fg:var(--text-primary); --_bd:var(--border); --_bgh:var(--control-bg);
}
.ik-btn--outline:hover{ border-color:var(--text-tertiary); }
.ik-btn--ghost{
  --_bg:transparent; --_fg:var(--text-secondary); --_bd:transparent; --_bgh:var(--control-bg);
}
.ik-btn--sm{ padding:6px 12px; font-size:12.5px; border-radius:8px; }
.ik-btn--block{ width:100%; }

/* ── Form controls ───────────────────────────────────────────────────────── */
.ik-field{
  width:100%; font:inherit; font-size:14px; color:var(--text-primary);
  background:var(--surface); border:1.5px solid var(--border); border-radius:9px;
  padding:10px 12px; transition:border-color .15s ease, box-shadow .15s ease;
}
.ik-field::placeholder{ color:var(--text-tertiary); }
.ik-field:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--focus-ring); }
.ik-field:disabled{ background:var(--control-bg); color:var(--text-disabled); cursor:not-allowed; }
.ik-label{ display:block; font-size:12px; font-weight:700; color:var(--text-secondary); margin-bottom:6px; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.ik-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-card);
}
.ik-card--raised{ box-shadow:var(--shadow-raised); }

/* ── Badges / pills ──────────────────────────────────────────────────────── */
.ik-badge{
  --_c:var(--text-secondary); --_bg:var(--control-bg);
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; letter-spacing:.02em; line-height:1;
  padding:4px 9px; border-radius:999px; color:var(--_c); background:var(--_bg);
  border:1px solid transparent;
}
.ik-badge--brand   { --_c:var(--brand);   --_bg:var(--brand-soft); }
.ik-badge--navy    { --_c:var(--navy);    --_bg:var(--navy-soft); }
.ik-badge--violet  { --_c:var(--violet);  --_bg:var(--violet-soft); }
.ik-badge--success { --_c:var(--success); --_bg:var(--success-soft); }
.ik-badge--warning { --_c:var(--warning); --_bg:var(--warning-soft); }
.ik-badge--danger  { --_c:var(--danger);  --_bg:var(--danger-soft); }
.ik-badge--info    { --_c:var(--info);    --_bg:var(--info-soft); }

/* ── Alerts / banners — icon or text should accompany color (a11y) ───────── */
.ik-alert{
  --_c:var(--text-primary); --_bg:var(--surface-subtle); --_bd:var(--border);
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px; border-radius:12px;
  border:1px solid var(--_bd); border-left:4px solid var(--_bd);
  background:var(--_bg); color:var(--_c); font-size:13px; line-height:1.5;
}
.ik-alert--success{ --_bg:var(--success-soft); --_bd:var(--success); }
.ik-alert--warning{ --_bg:var(--warning-soft); --_bd:var(--warning); }
.ik-alert--danger { --_bg:var(--danger-soft);  --_bd:var(--danger); }
.ik-alert--info   { --_bg:var(--info-soft);    --_bd:var(--info); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.ik-table{ width:100%; border-collapse:collapse; font-size:13px; color:var(--text-primary); }
.ik-table th{
  text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-secondary); background:var(--surface-subtle);
  padding:10px 14px; border-bottom:1px solid var(--border);
}
.ik-table td{ padding:12px 14px; border-bottom:1px solid var(--divider); vertical-align:middle; }
.ik-table tbody tr:hover td{ background:var(--surface-subtle); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ik-empty{
  text-align:center; padding:40px 20px; color:var(--text-secondary);
}
.ik-empty__icon{ font-size:26px; margin-bottom:8px; opacity:.7; }
.ik-empty__title{ font-weight:700; color:var(--text-primary); margin-bottom:4px; }

/* ── Dividers ────────────────────────────────────────────────────────────── */
.ik-divider{ height:1px; background:var(--divider); border:0; margin:16px 0; }