/**
 * Skillgy Modern UI — Base theme & typography
 */
body.skillgy-light,
body.skillgy-dark {
  font-family: var(--skillgy-font-family);
}

.skillgy-modern-root {
  color: var(--skillgy-text);
  font-family: var(--skillgy-font-family);
}

.skillgy-section {
  padding: 2rem 0;
}

.skillgy-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--skillgy-text);
  margin-bottom: 1.25rem;
}

.skillgy-text-muted {
  color: var(--skillgy-text-muted) !important;
}

.skillgy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

.skillgy-badge-primary { background: rgba(37, 99, 235, 0.12); color: var(--skillgy-primary); }
.skillgy-badge-success { background: rgba(22, 163, 74, 0.12); color: var(--skillgy-success); }
.skillgy-badge-warning { background: rgba(245, 158, 11, 0.15); color: var(--skillgy-warning); }
.skillgy-badge-danger  { background: rgba(220, 38, 38, 0.12); color: var(--skillgy-danger); }

.skillgy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border-radius: var(--skillgy-radius-md);
  font-size: 0.9375rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--skillgy-transition), color var(--skillgy-transition), border-color var(--skillgy-transition), transform var(--skillgy-transition), box-shadow var(--skillgy-transition);
  text-decoration: none;
  white-space: nowrap;
}

.skillgy-btn:hover { transform: translateY(-1px); text-decoration: none; box-shadow: var(--skillgy-shadow-sm); }
.skillgy-btn-primary { background: var(--skillgy-primary); color: #fff; border-color: var(--skillgy-primary); }
.skillgy-btn-primary:hover { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.skillgy-btn-outline { background: transparent; border-color: var(--skillgy-border); color: var(--skillgy-text); }
.skillgy-btn-outline:hover { background: var(--skillgy-hover); color: var(--skillgy-text); border-color: var(--skillgy-primary); }
.skillgy-btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }

.skillgy-btn i {
  font-size: 1em;
}

.skillgy-filter-bar .ms-auto {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.skillgy-filter-bar .ms-auto .skillgy-btn {
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
}

.skillgy-filter-bar .ms-auto .skillgy-btn i {
  margin: 0;
}

.skillgy-theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--skillgy-radius-md);
  border: 1px solid var(--skillgy-border);
  background: var(--skillgy-card);
  color: var(--skillgy-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--skillgy-transition);
}

.skillgy-theme-toggle:hover { background: var(--skillgy-hover); }