/* Base CSS für woxowai */
/* Diese Datei enthält grundlegende Styles, die von allen Screens verwendet werden */

/* Focus Styles für spezifische Klassen */
.focus-primary:focus {
  outline: 2px solid var(--color-focus-primary);
  outline-offset: 2px;
}

/* Selection Styles für spezifische Klassen */
.selection-primary::selection {
  background-color: var(--color-primary);
  color: var(--color-text-primary);
}

.selection-primary::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-text-primary);
}

/* Scrollbar Styles für spezifische Container */
.scrollbar-custom::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-custom::-webkit-scrollbar-track {
  background: var(--color-background-secondary);
}

.scrollbar-custom::-webkit-scrollbar-thumb {
  background: var(--color-border-secondary);
  border-radius: var(--border-radius-sm);
}

.scrollbar-custom::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-light);
}

/* Utility Classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-background-secondary); }
.bg-card { background-color: var(--color-background-card); }

.border { border: 1px solid var(--color-border-primary); }
.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-border-secondary); }

.rounded { border-radius: var(--border-radius-md); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }

.shadow { box-shadow: var(--shadow-md); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Animation Utilities */
.transition { transition: all 0.3s ease; }
.transition-fast { transition: all 0.15s ease; }
.transition-slow { transition: all 0.5s ease; }

/* Responsive Utilities */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

@media (max-width: 576px) {
  .hidden-mobile { display: none; }
  .block-mobile { display: block; }
  .flex-mobile { display: flex; }
}

@media (min-width: 577px) {
  .hidden-desktop { display: none; }
  .block-desktop { display: block; }
  .flex-desktop { display: flex; }
}