/* DI Solutions component styles.
   Lifted verbatim from the design system's component references
   (.claude/skills/disolutions-design/components/core/*.jsx). Global, not scoped,
   because the design uses shared `di-` class names and Lucide injects SVGs at
   runtime (which scoped CSS would not reach). Use var(--…) tokens only. */

/* ---- Icon helper ---- */
.di-icon { display: inline-flex; }
.di-icon svg { display: block; }

/* ---- Button ---- */
.di-btn {
  --_bg: transparent;
  --_fg: var(--text-primary);
  --_bd: transparent;
  --_shadow: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg);
  border-radius: var(--radius-button); cursor: pointer; white-space: nowrap;
  box-shadow: var(--_shadow); text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
.di-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.di-btn:active { transform: scale(var(--press-scale)); }
.di-btn[disabled], .di-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.di-btn--sm { font-size: var(--text-sm); padding: 8px 14px; }
.di-btn--md { font-size: var(--text-base); padding: 11px 20px; }
.di-btn--lg { font-size: var(--text-lg); padding: 14px 28px; }
.di-btn--full { width: 100%; }

.di-btn--primary { --_bg: var(--brand-gradient); --_fg: #fff; --_shadow: var(--glow-sm); }
.di-btn--primary:hover { --_shadow: var(--glow-md); transform: translateY(var(--hover-lift)); }

.di-btn--secondary { --_bg: var(--bg-subtle); --_fg: var(--text-primary); --_bd: var(--border-default); }
.di-btn--secondary:hover { --_bg: var(--bg-subtle-hover); --_bd: var(--border-strong); }

.di-btn--outline { --_bg: transparent; --_fg: var(--text-primary); --_bd: var(--border-strong); }
.di-btn--outline:hover { --_bg: var(--bg-subtle); }

.di-btn--ghost { --_bg: transparent; --_fg: var(--text-secondary); }
.di-btn--ghost:hover { --_bg: var(--bg-subtle); --_fg: var(--text-primary); }

.di-btn--danger { --_bg: var(--danger); --_fg: #2a0c0c; }
.di-btn--danger:hover { transform: translateY(var(--hover-lift)); box-shadow: 0 8px 22px rgba(248,113,113,.35); }

.di-btn__icon { display: inline-flex; }
.di-btn__icon svg { width: 1.15em; height: 1.15em; display: block; }

/* ---- IconButton ---- */
.di-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--bg-subtle); color: var(--text-secondary);
  border: 1px solid var(--border-default); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.di-iconbtn:hover { background: var(--bg-subtle-hover); color: var(--text-primary); border-color: var(--border-strong); }
.di-iconbtn:active { transform: scale(var(--press-scale)); }
.di-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.di-iconbtn[disabled] { opacity: 0.45; pointer-events: none; }
.di-iconbtn svg { width: 1.2em; height: 1.2em; display: block; }
.di-iconbtn--round { border-radius: 50%; }
.di-iconbtn--square { border-radius: var(--radius-md); }
.di-iconbtn--sm { width: 34px; height: 34px; font-size: 15px; }
.di-iconbtn--md { width: 42px; height: 42px; font-size: 17px; }
.di-iconbtn--lg { width: 52px; height: 52px; font-size: 20px; }
.di-iconbtn--primary { background: var(--brand-gradient); color: #fff; border-color: transparent; box-shadow: var(--glow-sm); }
.di-iconbtn--primary:hover { box-shadow: var(--glow-md); transform: translateY(var(--hover-lift)); }

/* ---- Badge ---- */
.di-badge {
  --_bg: var(--bg-subtle); --_fg: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
  letter-spacing: 0.02em; line-height: 1;
  padding: 5px 10px; border-radius: var(--radius-badge);
  background: var(--_bg); color: var(--_fg); white-space: nowrap;
  border: 1px solid transparent;
}
.di-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.di-badge--neutral { --_bg: var(--bg-subtle); --_fg: var(--text-secondary); border-color: var(--border-subtle); }
.di-badge--brand   { --_bg: var(--accent-soft); --_fg: var(--brand-indigo-bright); }
.di-badge--success { --_bg: var(--success-bg); --_fg: var(--success); }
.di-badge--warning { --_bg: var(--warning-bg); --_fg: var(--warning); }
.di-badge--danger  { --_bg: var(--danger-bg); --_fg: var(--danger); }
.di-badge--info    { --_bg: var(--info-bg); --_fg: var(--info); }
.di-badge--solid   { --_bg: var(--brand-gradient); --_fg: #fff; }

/* ---- Tag ---- */
.di-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
  padding: 5px 11px; border-radius: var(--radius-chip);
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border-default); white-space: nowrap;
  transition: var(--transition-fast);
}
.di-tag--filled { background: var(--bg-subtle); border-color: var(--border-subtle); }
.di-tag--interactive { cursor: pointer; }
.di-tag--interactive:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-subtle-hover); }
.di-tag__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ---- Card ---- */
.di-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm), var(--edge-highlight);
  color: var(--text-primary);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.di-card--pad-sm { padding: 18px; }
.di-card--pad-md { padding: 24px; }
.di-card--pad-lg { padding: 32px; }
.di-card--pad-none { padding: 0; }
.di-card--interactive { cursor: pointer; }
.di-card--interactive:hover {
  transform: translateY(var(--hover-lift));
  border-color: var(--border-strong);
  background: var(--surface-card-hover);
  box-shadow: var(--shadow-md), var(--edge-highlight);
}
.di-card--glow:hover { box-shadow: var(--shadow-md), var(--glow-sm); }
.di-card--accent::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--brand-gradient); opacity: 0.9;
}
a.di-card { text-decoration: none; display: block; }

/* ---- Input / Field ---- */
.di-field { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.di-field__label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
.di-field__req { color: var(--brand-violet-bright); margin-left: 2px; }
.di-input-wrap { position: relative; display: flex; align-items: center; }
.di-input-wrap__icon { position: absolute; left: 14px; display: inline-flex; color: var(--text-faint); pointer-events: none; }
.di-input-wrap__icon svg { width: 17px; height: 17px; display: block; }
.di-input {
  width: 100%; font-family: var(--font-sans); font-size: var(--text-base);
  color: var(--text-primary); background: var(--bg-subtle);
  border: 1px solid var(--border-default); border-radius: var(--radius-input);
  padding: 11px 14px; transition: var(--transition-fast); outline: none;
}
.di-input::placeholder { color: var(--text-faint); }
.di-input--has-icon { padding-left: 40px; }
.di-input:hover { border-color: var(--border-strong); }
.di-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); background: var(--bg-page); }
.di-input--error { border-color: var(--danger); }
.di-input--error:focus { box-shadow: 0 0 0 3px var(--danger-bg); }
.di-field__hint { font-size: var(--text-xs); color: var(--text-faint); }
.di-field__hint--error { color: var(--danger); }
textarea.di-input { resize: vertical; min-height: 110px; line-height: var(--leading-normal); }

/* ---- Avatar ---- */
.di-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex: none;
  font-family: var(--font-display); font-weight: var(--weight-bold); color: #fff;
  background: var(--brand-gradient); user-select: none;
}
.di-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.di-avatar--ring { box-shadow: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--accent); }
.di-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.di-avatar--md { width: 44px; height: 44px; font-size: 16px; }
.di-avatar--lg { width: 60px; height: 60px; font-size: 21px; }
.di-avatar--xl { width: 88px; height: 88px; font-size: 30px; }

/* ---- Stat ---- */
.di-stat { display: flex; flex-direction: column; gap: 4px; }
.di-stat__value {
  font-family: var(--font-display); font-weight: var(--weight-extrabold);
  line-height: 1; letter-spacing: var(--tracking-tight); color: var(--text-primary);
}
.di-stat__value--gradient {
  background: var(--brand-gradient-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.di-stat--sm .di-stat__value { font-size: var(--text-3xl); }
.di-stat--md .di-stat__value { font-size: var(--text-5xl); }
.di-stat--lg .di-stat__value { font-size: var(--text-7xl); }
.di-stat__label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase;
}

/* ---- Eyebrow ---- */
.di-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--accent-hover);
}
.di-eyebrow__line { width: 22px; height: 1px; background: currentColor; opacity: 0.5; }
.di-eyebrow--muted { color: var(--text-muted); }