/* ============================================================
   DETSUITE — UI KIT PRIMITIVES (L1.7)
   ============================================================

   Three load-bearing primitives built on tokens.css:
     - .df-btn       (3 variants × 3 sizes)
     - .df-input     (+ .df-textarea, .df-select)
     - .df-card      (2 variants: data + chrome)

   Factory equipment per G-021. At L1.5.5 this file moves to
   AGENTS/SHARED/ui-kit/ui-kit.css and is imported by DetSuite
   + future products.

   Load order on any page using these:
       <link rel="stylesheet" href="tokens.css">    (FIRST — tokens)
       <link rel="stylesheet" href="ui-kit.css">    (SECOND — kit)
       <link rel="stylesheet" href="styles.css">    (OPTIONAL — page styles)

   Naming: `.df-<primitive>[-<variant>][--<size>]`.
   Mobile-first: every clickable primitive is ≥44×44 (G-020).
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   BUTTON — .df-btn
   ────────────────────────────────────────────────────────────
   Variants (mutually exclusive): primary, ghost, danger
   Sizes    (mutually exclusive): sm, md (default), lg
   States: hover, focus-visible, disabled, [aria-pressed="true"]

   Example:
     <button class="df-btn">Save</button>                    (primary md)
     <button class="df-btn df-btn--ghost">Cancel</button>
     <button class="df-btn df-btn--danger df-btn--lg">Delete</button>
   ──────────────────────────────────────────────────────────── */

.df-btn {
  /* core layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sp-2);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  text-decoration: none;

  /* sizing — md default, ≥44px tap target */
  min-height: var(--ds-tap-min);
  padding: var(--ds-sp-3) var(--ds-sp-4);
  font-family: var(--ds-font-ui);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-semibold);
  line-height: var(--ds-lh-tight);

  /* visual — primary default */
  background: var(--ds-accent);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-elev-1);

  /* motion */
  transition: background var(--ds-dur-fast) var(--ds-ease-snap),
              border-color var(--ds-dur-fast) var(--ds-ease-snap),
              box-shadow var(--ds-dur-fast) var(--ds-ease-snap),
              transform var(--ds-dur-fast) var(--ds-ease-snap);
}

.df-btn:hover  { background: var(--ds-accent-dim); }
.df-btn:active { transform: scale(0.97); box-shadow: var(--ds-elev-0); }

.df-btn:focus-visible {
  outline: 2px solid var(--ds-border-focus);
  outline-offset: 2px;
}

.df-btn:disabled,
.df-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Variant: ghost (no fill, hairline border) */
.df-btn--ghost {
  background: transparent;
  color: var(--ds-text);
  border-color: var(--ds-border-strong);
  box-shadow: none;
}
.df-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--ds-border-focus);
  color: var(--ds-text);
}

/* ── Variant: danger (destructive, rust red) */
.df-btn--danger {
  background: var(--ds-danger);
  color: #fff;
}
.df-btn--danger:hover { background: #d63b3b; }

/* ── Size: sm */
.df-btn--sm {
  min-height: 36px;
  padding: var(--ds-sp-2) var(--ds-sp-3);
  font-size: var(--ds-fs-xs);
}

/* ── Size: lg */
.df-btn--lg {
  min-height: 52px;
  padding: var(--ds-sp-3) var(--ds-sp-5);
  font-size: var(--ds-fs-md);
}

/* ── Icon-only button (square, no padding spillover) */
.df-btn--icon {
  padding: 0;
  min-width: var(--ds-tap-min);
}
.df-btn--icon.df-btn--sm { min-width: 36px; }
.df-btn--icon.df-btn--lg { min-width: 52px; }

/* ── SVG inside button: scales with font-size, currentColor */
.df-btn > svg,
.df-btn > [data-icon] > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.df-btn--sm > svg,
.df-btn--sm > [data-icon] > svg { width: 14px; height: 14px; }
.df-btn--lg > svg,
.df-btn--lg > [data-icon] > svg { width: 22px; height: 22px; }


/* ────────────────────────────────────────────────────────────
   INPUT — .df-input (+ textarea + select)
   ────────────────────────────────────────────────────────────
   One field shape. Focus ring matches button focus ring.
   ≥44px tap target. autocapitalize/autocomplete handled at
   the call site (G-020 N2 pattern).

   Example:
     <input class="df-input" placeholder="CCN" autocomplete="off">
     <textarea class="df-textarea" rows="6"></textarea>
     <select class="df-select"><option>A</option></select>
   ──────────────────────────────────────────────────────────── */

.df-input,
.df-textarea,
.df-select {
  display: block;
  width: 100%;
  min-height: var(--ds-tap-min);
  padding: var(--ds-sp-3) var(--ds-sp-4);

  background: var(--ds-bg-input);
  color: var(--ds-text);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-lg);

  font-family: var(--ds-font-ui);
  font-size: var(--ds-fs-md);
  line-height: var(--ds-lh-snug);

  transition: border-color var(--ds-dur-fast) var(--ds-ease-snap),
              box-shadow var(--ds-dur-fast) var(--ds-ease-snap);

  /* iOS Safari fixes */
  -webkit-appearance: none;
  -webkit-text-fill-color: var(--ds-text);
  appearance: none;
  outline: none;
}

.df-input::placeholder,
.df-textarea::placeholder {
  color: var(--ds-text-dim);
}

.df-input:focus,
.df-textarea:focus,
.df-select:focus {
  border-color: var(--ds-border-focus);
  box-shadow: 0 0 0 3px var(--ds-accent-soft);
}

.df-input:disabled,
.df-textarea:disabled,
.df-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.df-input[aria-invalid="true"],
.df-textarea[aria-invalid="true"],
.df-select[aria-invalid="true"] {
  border-color: var(--ds-danger);
}
.df-input[aria-invalid="true"]:focus,
.df-textarea[aria-invalid="true"]:focus,
.df-select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--ds-danger-soft);
}

.df-textarea {
  resize: vertical;
  line-height: var(--ds-lh-relaxed);
  min-height: 120px;
}

/* ── Mono variant (CCN / badge_hash / IDs) */
.df-input--mono,
.df-textarea--mono {
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}


/* ────────────────────────────────────────────────────────────
   CARD — .df-card
   ────────────────────────────────────────────────────────────
   Two variants:
     .df-card           — data card (records, list items)
     .df-card--chrome   — chrome card (panels, modals, sticky regions)

   Example:
     <div class="df-card">
       <div class="df-card-header">Title</div>
       <div class="df-card-body">…</div>
     </div>
   ──────────────────────────────────────────────────────────── */

.df-card {
  background: var(--ds-bg-card);
  color: var(--ds-text);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-elev-1);
  overflow: hidden;
  transition: border-color var(--ds-dur-fast) var(--ds-ease-snap),
              box-shadow var(--ds-dur-fast) var(--ds-ease-snap);
}

.df-card:hover {
  border-color: var(--ds-border-strong);
  box-shadow: var(--ds-elev-2);
}

/* Interactive card — entire surface is a tap target */
.df-card[tabindex],
.df-card[role="button"],
a.df-card {
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
}
.df-card[tabindex]:focus-visible,
.df-card[role="button"]:focus-visible,
a.df-card:focus-visible {
  outline: 2px solid var(--ds-border-focus);
  outline-offset: 2px;
}

.df-card-header,
.df-card-body,
.df-card-footer {
  padding: var(--ds-sp-4);
}
.df-card-header {
  border-bottom: 1px solid var(--ds-border);
  font-weight: var(--ds-fw-semibold);
  font-size: var(--ds-fs-md);
}
.df-card-footer {
  border-top: 1px solid var(--ds-border);
  font-size: var(--ds-fs-sm);
  color: var(--ds-text-muted);
}

/* ── Variant: chrome (panels, modals — flatter, more subtle) */
.df-card--chrome {
  background: var(--ds-bg-panel);
  box-shadow: var(--ds-elev-0);
}
.df-card--chrome:hover {
  box-shadow: var(--ds-elev-0);
  border-color: var(--ds-border);
}

/* ── Modifier: elevated (uses elev-3 — modal-grade) */
.df-card--elevated {
  background: var(--ds-bg-card);
  box-shadow: var(--ds-elev-3);
}


/* ────────────────────────────────────────────────────────────
   ACCESSIBILITY — reduced motion bridge
   ────────────────────────────────────────────────────────────
   When --ds-dur-fast / --ds-dur-slow are 0ms (reduced-motion),
   transition rules above become instant — no extra rules
   needed here.
*/