/**
 * Light Touch Consistency Styles
 * Minimal overrides for problem-solving interface to use design tokens
 * Maintains existing functionality while applying token consistency
 */

/* Breadcrumb Consistency */
.breadcrumb {
  background-color: var(--ep-bg-light);
  border: 1px solid var(--ep-border-default);
  border-radius: var(--ep-radius-md);
  padding: var(--ep-spacing-sm) var(--ep-spacing-md);
}

.breadcrumb-item a {
  color: var(--ep-text-link);
  text-decoration: none;
  transition: var(--ep-transition-colors);
}

.breadcrumb-item a:hover {
  color: var(--ep-text-link-hover);
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--ep-text-secondary);
}

/* Problem Info Section */
.problem-info {
  color: var(--ep-blue);
}

.problem-info h3 {
  color: var(--ep-blue);
}

/* Step Containers - Light Touch */
.input-container {
  /* Maintain existing structure, just ensure spacing uses tokens where possible */
}

.equation-container {
  /* Keep existing functionality */
}

/* Buttons - Light Touch Consistency */
button.e-Bg {
  background-color: var(--ep-blue-light);
  color: var(--ep-text-primary);
  border: 1px solid var(--ep-border-button);
  transition: var(--ep-transition-colors);
}

button.e-Bg:hover:not(:disabled) {
  background-color: var(--ep-blue);
  color: var(--ep-bg-white);
  border-color: var(--ep-blue);
}

button.e-Bg:focus {
  outline: 2px solid var(--ep-border-focus);
  outline-offset: 2px;
}

button.e-Bg:disabled {
  background-color: var(--ep-bg-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Ensure focus indicators meet accessibility */
*:focus-visible {
  outline: 2px solid var(--ep-border-focus);
  outline-offset: 2px;
}