/*
 * Earpedia component foundation.
 *
 * Phase 6C defines reusable, token-based component primitives. Existing
 * page-specific classes are included through low-specificity aliases so page
 * CSS loaded later can preserve current visuals until explicit migration.
 */

/* ================== Buttons ================== */
.ep-btn,
:where(
  .settings-card .btn,
  .btn-primary,
  .course-link-btn,
  .error-btn,
  .article__btn-outline,
  .journal-news-section .read-more-btn
) {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--ep-radius-lg);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--ep-font-family-sans);
  font-size: var(--ep-font-size-base);
  font-weight: var(--ep-font-weight-bold);
  gap: var(--ep-space-2);
  justify-content: center;
  line-height: var(--ep-line-height-tight);
  min-height: 2.75rem;
  padding: var(--ep-space-3) var(--ep-space-4);
  text-align: center;
  text-decoration: none;
  transition: var(--ep-transition-colors), var(--ep-transition-transform),
    var(--ep-transition-shadow);
  user-select: none;
  vertical-align: middle;
}

.ep-btn:hover,
:where(
  .settings-card .btn,
  .btn-primary,
  .course-link-btn,
  .error-btn,
  .article__btn-outline,
  .journal-news-section .read-more-btn
):hover {
  transform: translateY(-1px);
}

.ep-btn:active,
:where(
  .settings-card .btn,
  .btn-primary,
  .course-link-btn,
  .error-btn,
  .article__btn-outline,
  .journal-news-section .read-more-btn
):active {
  transform: translateY(0);
}

.ep-btn:focus-visible {
  box-shadow: var(--ep-focus-ring-shadow);
}

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

.ep-btn[aria-busy="true"],
.ep-btn--loading {
  cursor: progress;
  opacity: 0.78;
}

.ep-btn svg,
.ep-btn__icon {
  flex: 0 0 auto;
  height: 1em;
  width: 1em;
}

.ep-btn--primary {
  background: linear-gradient(
    135deg,
    var(--ep-color-accent-primary),
    var(--ep-color-accent-secondary)
  );
  box-shadow: var(--ep-shadow-sm);
  color: var(--ep-color-text-inverse);
}

.ep-btn--primary:hover {
  box-shadow: var(--ep-shadow-md);
}

.ep-btn--secondary {
  background: var(--ep-color-bg-surface);
  border-color: var(--ep-color-border-subtle);
  color: var(--ep-color-brand-primary);
}

.ep-btn--secondary:hover {
  background: var(--ep-color-bg-surface-muted);
  border-color: var(--ep-color-border-blue-soft);
}

.ep-btn--subtle {
  background: var(--ep-color-bg-surface-soft);
  border-color: var(--ep-color-border-blue-soft);
  color: var(--ep-color-brand-primary);
}

.ep-btn--ghost {
  background: transparent;
  border-color: var(--ep-color-border-subtle);
  color: var(--ep-color-brand-primary);
}

.ep-btn--danger {
  background: var(--ep-color-danger-bg);
  border-color: var(--ep-color-danger-border);
  color: var(--ep-color-danger-text);
}

.ep-btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--ep-color-link);
  min-height: auto;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.ep-btn--link:hover {
  color: var(--ep-color-link-hover);
}

.ep-btn--icon {
  aspect-ratio: 1;
  min-height: 2.5rem;
  padding: var(--ep-space-2);
  width: 2.5rem;
}

.ep-btn--sm {
  font-size: var(--ep-font-size-sm);
  min-height: 2.25rem;
  padding: var(--ep-space-2) var(--ep-space-3);
}

.ep-btn--lg {
  font-size: var(--ep-font-size-lg);
  min-height: 3.25rem;
  padding: var(--ep-space-4) var(--ep-space-6);
}

/* ================== Cards ================== */
.ep-card,
:where(
  .course-card-item,
  .course-section,
  .course-card,
  .settings-card,
  .blog-featured__card,
  .news-section .news__card,
  .journal-news-section .news-article-card,
  .search-card,
  .error-card,
  .login-card,
  .auth-card
) {
  background: var(--ep-color-bg-surface);
  border: 1px solid var(--ep-color-border-subtle);
  border-radius: var(--ep-radius-xl);
  box-shadow: var(--ep-shadow-sm);
  color: var(--ep-color-text-body);
  padding: var(--ep-card-padding-md);
}

.ep-card--flat {
  box-shadow: var(--ep-shadow-none);
}

.ep-card--raised {
  box-shadow: var(--ep-shadow-lg);
}

.ep-card--interactive {
  transition: var(--ep-transition-transform), var(--ep-transition-shadow),
    var(--ep-transition-colors);
}

.ep-card--interactive:hover {
  border-color: var(--ep-color-border-blue-soft);
  box-shadow: var(--ep-shadow-md);
  transform: translateY(-1px);
}

.ep-card--muted {
  background: var(--ep-color-bg-surface-muted);
}

.ep-card--dark {
  background: var(--ep-color-bg-inverse);
  border-color: var(--ep-color-border-dark);
  box-shadow: var(--ep-shadow-dark);
  color: var(--ep-color-text-inverse);
}

.ep-card--dashboard {
  border-color: var(--ep-color-border-default);
  box-shadow: var(--ep-shadow-xs);
}

.ep-card--editorial {
  box-shadow: var(--ep-shadow-md);
}

.ep-card__header,
.ep-card__body,
.ep-card__footer {
  display: grid;
  gap: var(--ep-space-3);
}

.ep-card__header {
  margin-bottom: var(--ep-space-4);
}

.ep-card__footer {
  margin-top: var(--ep-space-4);
}

/* ================== Badges and chips ================== */
.ep-badge,
.ep-chip,
:where(
  .course-chip,
  .course-badge,
  .status-badge,
  .blog-chip,
  .search-chip,
  .pill
) {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--ep-radius-pill);
  display: inline-flex;
  font-size: var(--ep-font-size-sm);
  font-weight: var(--ep-font-weight-semibold);
  gap: var(--ep-space-2);
  line-height: var(--ep-line-height-tight);
  padding: var(--ep-space-2) var(--ep-space-3);
  text-decoration: none;
}

.ep-badge,
.ep-badge--info {
  background: var(--ep-color-info-bg);
  border-color: var(--ep-color-info-border);
  color: var(--ep-color-info-text);
}

.ep-badge--primary {
  background: var(--ep-color-bg-surface-soft);
  border-color: var(--ep-color-border-blue-soft);
  color: var(--ep-color-brand-primary);
}

.ep-badge--secondary {
  background: var(--ep-color-bg-surface-soft);
  border-color: var(--ep-color-border-blue-soft);
  color: var(--ep-color-brand-secondary);
}

.ep-badge--success {
  background: var(--ep-color-success-bg);
  border-color: var(--ep-color-success-border);
  color: var(--ep-color-success-text);
}

.ep-badge--warning {
  background: var(--ep-color-warning-bg);
  border-color: var(--ep-color-warning-border);
  color: var(--ep-color-warning-text);
}

.ep-badge--danger {
  background: var(--ep-color-danger-bg);
  border-color: var(--ep-color-danger-border);
  color: var(--ep-color-danger-text);
}

.ep-badge--muted {
  background: var(--ep-color-bg-surface-muted);
  border-color: var(--ep-color-border-subtle);
  color: var(--ep-color-text-muted);
}

.ep-chip {
  background: var(--ep-color-bg-surface-soft);
  border-color: var(--ep-color-border-blue-soft);
  color: var(--ep-color-brand-primary);
  cursor: default;
}

.ep-chip--active,
.ep-chip--filter[aria-pressed="true"] {
  background: var(--ep-color-accent-primary);
  border-color: var(--ep-color-accent-primary);
  color: var(--ep-color-text-inverse);
}

.ep-chip--filter {
  cursor: pointer;
  transition: var(--ep-transition-colors), var(--ep-transition-transform);
}

.ep-chip--filter:hover {
  transform: translateY(-1px);
}

/* ================== Forms ================== */
.ep-form {
  display: grid;
  gap: var(--ep-form-gap);
}

.ep-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ep-form-gap);
}

.ep-form-group,
.ep-form-field,
:where(.form-control, .filter-group) {
  display: grid;
  gap: var(--ep-space-2);
}

.ep-label,
.ep-form-field label {
  color: var(--ep-color-text-primary);
  font-size: var(--ep-font-size-sm);
  font-weight: var(--ep-font-weight-bold);
  line-height: var(--ep-line-height-snug);
}

.ep-input,
.ep-select,
.ep-textarea,
.ep-search-field,
.ep-form-field input,
.ep-form-field select,
.ep-form-field textarea,
:where(
  .course-filter-bar input[type="text"],
  .course-filter-bar select,
  .login-form input[type="email"],
  .login-form input[type="password"],
  .auth-form input[type="email"],
  .auth-form input[type="password"],
  .signup-form select,
  .form-control input,
  .form-control select,
  .article__textarea,
  .contact-form__field select,
  .contact-form__field textarea
) {
  background: var(--ep-color-bg-surface);
  border: 1px solid var(--ep-color-border-subtle);
  border-radius: var(--ep-radius-md);
  color: var(--ep-color-text-primary);
  font-family: var(--ep-font-family-sans);
  font-size: var(--ep-font-size-base);
  line-height: var(--ep-line-height-base);
  padding: var(--ep-space-3) var(--ep-space-4);
  transition: var(--ep-transition-colors), var(--ep-transition-shadow);
  width: 100%;
}

.ep-textarea {
  min-height: 9rem;
  resize: vertical;
}

.ep-input:focus,
.ep-select:focus,
.ep-textarea:focus,
.ep-search-field:focus,
.ep-form-field input:focus,
.ep-form-field select:focus,
.ep-form-field textarea:focus {
  border-color: var(--ep-color-border-focus);
  box-shadow: var(--ep-focus-ring-shadow);
  outline: 0;
}

.ep-checkbox,
.ep-radio {
  accent-color: var(--ep-color-accent-primary);
}

.ep-help-text {
  color: var(--ep-color-text-muted);
  font-size: var(--ep-font-size-sm);
  line-height: var(--ep-line-height-snug);
}

.ep-error-text {
  color: var(--ep-color-danger-text);
  font-size: var(--ep-font-size-sm);
  line-height: var(--ep-line-height-snug);
}

.ep-field-error {
  border-color: var(--ep-color-danger-border);
}

.ep-field-error:focus {
  border-color: var(--ep-color-danger-text);
  box-shadow: var(--ep-focus-ring-shadow);
}

.ep-field-success {
  border-color: var(--ep-color-success-border);
}

.ep-field-success:focus {
  border-color: var(--ep-color-success-text);
  box-shadow: var(--ep-focus-ring-shadow);
}

.ep-search-field {
  padding-left: var(--ep-space-4);
}

/* ================== Notices ================== */
.ep-notice,
:where(.login-notice, .auth-notice, .course-register-status, .dashboard-main .notice) {
  border: 1px solid var(--ep-color-info-border);
  border-radius: var(--ep-radius-lg);
  color: var(--ep-color-info-text);
  display: grid;
  gap: var(--ep-space-2);
  line-height: var(--ep-line-height-base);
  padding: var(--ep-space-4);
}

.ep-notice--info {
  background: var(--ep-color-info-bg);
  border-color: var(--ep-color-info-border);
  color: var(--ep-color-info-text);
}

.ep-notice--success,
:where(.auth-notice.success, .course-register-status.success) {
  background: var(--ep-color-success-bg);
  border-color: var(--ep-color-success-border);
  color: var(--ep-color-success-text);
}

.ep-notice--warning,
:where(.course-register-status.notice) {
  background: var(--ep-color-warning-bg);
  border-color: var(--ep-color-warning-border);
  color: var(--ep-color-warning-text);
}

.ep-notice--danger,
:where(.login-notice.error, .auth-notice.error) {
  background: var(--ep-color-danger-bg);
  border-color: var(--ep-color-danger-border);
  color: var(--ep-color-danger-text);
}

.ep-notice__title {
  color: inherit;
  font-size: var(--ep-font-size-base);
  font-weight: var(--ep-font-weight-bold);
  line-height: var(--ep-line-height-snug);
  margin: 0;
}

.ep-notice__body {
  margin: 0;
}

.ep-notice__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ep-space-3);
  margin-top: var(--ep-space-2);
}

/* ================== Pagination ================== */
.ep-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ep-space-2);
  justify-content: center;
}

.ep-pagination__item {
  display: inline-flex;
}

.ep-pagination__link {
  align-items: center;
  background: var(--ep-color-bg-surface);
  border: 1px solid var(--ep-color-border-subtle);
  border-radius: var(--ep-radius-md);
  color: var(--ep-color-brand-primary);
  display: inline-flex;
  font-weight: var(--ep-font-weight-bold);
  justify-content: center;
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: var(--ep-space-2) var(--ep-space-3);
  text-decoration: none;
  transition: var(--ep-transition-colors), var(--ep-transition-transform);
}

.ep-pagination__link:hover {
  background: var(--ep-color-bg-surface-soft);
  transform: translateY(-1px);
}

.ep-pagination__link--current,
.ep-pagination__link[aria-current="page"] {
  background: var(--ep-color-brand-primary);
  border-color: var(--ep-color-brand-primary);
  color: var(--ep-color-text-inverse);
}

.ep-pagination__link[aria-disabled="true"],
.ep-pagination__link--disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

/* ================== Empty states ================== */
.ep-empty-state,
:where(.empty-state, .course-empty, .search-empty__card) {
  background: var(--ep-color-bg-surface);
  border: 1px dashed var(--ep-color-border-subtle);
  border-radius: var(--ep-radius-xl);
  color: var(--ep-color-text-muted);
  display: grid;
  gap: var(--ep-space-4);
  justify-items: center;
  padding: var(--ep-space-8);
  text-align: center;
}

.ep-empty-state__icon {
  align-items: center;
  background: var(--ep-color-bg-surface-soft);
  border-radius: var(--ep-radius-circle);
  color: var(--ep-color-brand-secondary);
  display: inline-flex;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

.ep-empty-state__title {
  color: var(--ep-color-text-primary);
  font-size: var(--ep-font-size-xl);
  font-weight: var(--ep-font-weight-bold);
  line-height: var(--ep-line-height-snug);
  margin: 0;
}

.ep-empty-state__text {
  color: var(--ep-color-text-muted);
  margin: 0;
  max-width: var(--ep-container-sm);
}

.ep-empty-state__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ep-space-3);
  justify-content: center;
}

/* ================== Section and page headers ================== */
.ep-section-header {
  display: grid;
  gap: var(--ep-space-3);
  margin-bottom: var(--ep-space-8);
}

.ep-section-header__eyebrow {
  color: var(--ep-color-brand-secondary);
  font-size: var(--ep-font-size-xs);
  font-weight: var(--ep-font-weight-bold);
  letter-spacing: var(--ep-letter-spacing-eyebrow);
  line-height: var(--ep-line-height-tight);
  text-transform: uppercase;
}

.ep-section-header__title {
  color: var(--ep-color-text-primary);
  font-size: var(--ep-font-size-4xl);
  font-weight: var(--ep-font-weight-bold);
  line-height: var(--ep-line-height-tight);
  margin: 0;
}

.ep-section-header__text {
  color: var(--ep-color-text-body);
  font-size: var(--ep-font-size-lg);
  line-height: var(--ep-line-height-relaxed);
  margin: 0;
  max-width: var(--ep-container-md);
}

.ep-page-header {
  display: grid;
  gap: var(--ep-space-4);
  padding-block: var(--ep-section-space-compact);
}

.ep-page-header--simple {
  background: var(--ep-color-bg-surface);
}

.ep-page-header--editorial {
  background: var(--ep-color-bg-page-blue);
}

.ep-page-header--course {
  background: var(--ep-color-bg-inverse);
  color: var(--ep-color-text-inverse);
}

.ep-page-header--dashboard {
  background: var(--ep-color-bg-page);
}

/* ================== Tables ================== */
.ep-table-wrap {
  border: 1px solid var(--ep-color-border-subtle);
  border-radius: var(--ep-radius-lg);
  overflow-x: auto;
}

.ep-table {
  border-collapse: collapse;
  color: var(--ep-color-text-body);
  font-size: var(--ep-font-size-base);
  line-height: var(--ep-line-height-base);
  min-width: 100%;
  width: 100%;
}

.ep-table th,
.ep-table td {
  border-bottom: 1px solid var(--ep-color-border-subtle);
  padding: var(--ep-space-3) var(--ep-space-4);
  text-align: left;
  vertical-align: top;
}

.ep-table th {
  background: var(--ep-color-bg-surface-muted);
  color: var(--ep-color-text-primary);
  font-weight: var(--ep-font-weight-bold);
}

.ep-table tr:last-child td {
  border-bottom: 0;
}

.ep-table--content {
  font-size: var(--ep-font-size-sm);
}

@media (prefers-reduced-motion: reduce) {
  .ep-btn,
  .ep-card--interactive,
  .ep-chip--filter,
  .ep-pagination__link {
    transition: none;
  }

  .ep-btn:hover,
  .ep-card--interactive:hover,
  .ep-chip--filter:hover,
  .ep-pagination__link:hover {
    transform: none;
  }
}