/* Legacy variable bridge — maps existing app CSS/JS to design tokens */

:root {
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-dark);
  --primary-light: var(--color-primary-light);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);
  --accent-dark: var(--color-accent-dark);

  --text: var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-light: var(--color-gray-500);
  --text-disabled: var(--color-gray-400);

  --bg: var(--color-bg-page);
  --bg-alt: var(--color-gray-100);
  --bg-hover: var(--color-gray-200);
  --card: var(--color-bg-card);
  --border: var(--color-gray-300);
  --border-light: var(--color-gray-200);

  --success: var(--color-success);
  --success-bg: rgba(42, 157, 111, 0.12);
  --success-text: #1a6b46;
  --success-border: var(--color-success);

  --warning: var(--color-warning);
  --warning-bg: rgba(232, 168, 56, 0.12);
  --warning-text: #a06820;
  --warning-border: var(--color-accent-dark);

  --error: var(--color-error);
  --error-bg: rgba(220, 38, 38, 0.08);
  --error-text: #991b1b;
  --error-border: var(--color-error);

  --info: var(--color-info);
  --info-bg: rgba(74, 124, 143, 0.12);
  --info-text: #3a6070;
  --info-border: var(--color-info);

  --link: var(--color-primary);
  --link-hover: var(--color-primary-dark);
  --link-visited: var(--color-secondary);

  --focus-ring: var(--color-primary);
  --focus-ring-offset: 2px;

  --font-family: var(--font-primary);
  --heading-font: var(--font-primary);
  --body-font: var(--font-primary);
  --font-light: var(--weight-light);
  --font-regular: var(--weight-regular);
  --font-semibold: var(--weight-semibold);
  --font-bold: var(--weight-bold);
  --heading-weight: var(--weight-bold);
  --body-weight: var(--weight-regular);

  --text-title-size: var(--text-2xl);
  --text-title-weight: var(--weight-bold);
  --text-headline-size: var(--text-xl);
  --text-headline-weight: var(--weight-semibold);
  --text-body-size: var(--text-base);
  --text-caption-size: var(--text-sm);

  /* Legacy spacing aliases (8px grid) */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);

  --elevation-0: none;
  --elevation-1: var(--shadow-xs);
  --elevation-2: var(--shadow-sm);
  --elevation-3: var(--shadow-md);
  --elevation-4: var(--shadow-lg);

  --motion-fast: 0.15s;
  --motion-normal: 0.25s;
  --motion-slow: 0.35s;
  --motion-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --motion-ease-in: cubic-bezier(0.4, 0.0, 1, 1);
  --motion-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
}

/* ── Tab aliases (unified underline system) ── */

.instructor-dashboard-tablist,
.settings-tablist,
.analytics-tablist,
.support-tablist,
#instructorDashboardTabBar,
#settingsTablist,
#analyticsTablist,
#supportDocTablist {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-gray-200);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.instructor-dashboard-tab,
.settings-tab,
.analytics-tab,
.support-tab,
.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
  text-decoration: none;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.instructor-dashboard-tab:hover,
.settings-tab:hover,
.analytics-tab:hover,
.support-tab:hover,
.tab:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary-light);
  background: none;
}

.instructor-dashboard-tab-active,
.settings-tab-active,
.analytics-tab-active,
.support-tab-active,
.tab.active {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  border-bottom-color: var(--color-accent);
  background: none;
}

.custom-tab-btn.instructor-dashboard-tab {
  margin-right: var(--space-2);
}

/* ── Button legacy class extensions ── */

.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-demo,
.btn-small,
.btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease,
              box-shadow 150ms ease, transform 100ms ease;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: visible;
  letter-spacing: normal;
  box-shadow: none;
  transform: none;
}

.btn::before,
.btn-primary::before,
.btn-secondary::before,
.btn-demo::before {
  display: none;
}

.btn:not(.btn-secondary):not(.btn-outline):not(.btn-ghost):not(.btn-accent):not(.btn-demo):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-icon):not(.btn-icon-only):not(.btn-small),
.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  padding: var(--space-3) var(--space-6);
}

.btn:not(.btn-secondary):not(.btn-outline):not(.btn-ghost):not(.btn-accent):not(.btn-demo):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-icon):not(.btn-icon-only):not(.btn-small):hover,
.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
  transform: none;
}

.btn-demo,
.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-primary-dark);
  border-color: var(--color-accent);
  padding: var(--space-3) var(--space-6);
  width: 100%;
}

.btn-demo:hover,
.btn-accent:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  box-shadow: var(--shadow-md);
  transform: none;
}

.btn-secondary,
.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
  padding: var(--space-3) var(--space-6);
}

.btn-secondary:hover,
.btn-outline:hover {
  background-color: var(--color-primary);
  color: #ffffff;
  transform: none;
}

.btn-success {
  background-color: var(--color-success);
  color: #ffffff;
  border-color: var(--color-success);
  padding: var(--space-3) var(--space-6);
}

.btn-danger {
  background-color: var(--color-error);
  color: #ffffff;
  border-color: var(--color-error);
  padding: var(--space-3) var(--space-6);
}

.btn-warning {
  background-color: var(--color-warning);
  color: var(--color-primary-dark);
  border-color: var(--color-warning);
  padding: var(--space-3) var(--space-6);
}

.btn-info {
  background-color: var(--color-info);
  color: #ffffff;
  border-color: var(--color-info);
  padding: var(--space-3) var(--space-6);
}

.btn-small,
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

.btn-icon-only,
.btn-icon {
  padding: var(--space-2);
  min-width: 2.75rem;
  min-height: 2.75rem;
  background-color: transparent;
  border-color: transparent;
  color: var(--color-gray-500);
}

.btn-icon-only:hover,
.btn-icon:hover {
  background-color: var(--color-gray-200);
  color: var(--color-primary);
}

button[type="submit"]:not(.tab):not(.instructor-dashboard-tab):not(.settings-tab):not(.analytics-tab):not(.general-nav-item):not(.admin-nav-item):not(.nav-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  background-color: var(--color-primary);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

button[type="submit"]:not(.tab):hover {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
}

/* ── Card flattening (one level of nesting) ── */

.card > .card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: var(--space-4);
}

.card > .card:hover {
  transform: none;
  box-shadow: none;
}

.card > .card .card-header {
  padding-left: 0;
  padding-right: 0;
}

/* Course/rubric list items → card-item pattern */
.class-card,
.rubric-item,
.student-card,
.eval-card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.class-card:hover,
.rubric-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}

/* ── Search input token alignment ── */

#unifiedSearchInput.input-search,
#unifiedSearchInput {
  max-width: 480px;
  border-radius: var(--radius-full);
}

/* ── App header uses nav tokens ── */

.app-header,
header.app-header {
  background-color: var(--color-bg-nav);
  box-shadow: var(--shadow-md);
}