/**
 * Main CSS Entry Point
 * Professional CSS architecture with design system tokens
 */

/* Design System Tokens */
@import url('./tokens/colors.css');
@import url('./tokens/theme.css');

/* Base Styles */
@import url('./base/reset.css');
@import url('./base/typography.css');

/* Components */
@import url('./components/layout.css');
@import url('./components/logo.css');
@import url('./components/buttons.css');
@import url('./components/forms.css');
@import url('./components/layers.css');
@import url('./components/editors.css');
@import url('./components/modals.css');
@import url('./components/context-menu.css');
@import url('./components/toast.css');
@import url('./components/tooltips.css');
@import url('./components/header-extras.css');

/* Preview iframe styles */
#preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--color-white);
}

/* Utility classes for common patterns */
.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;
}

/* Legacy class compatibility */
.main-btn {
  /* Redirect to new btn class */
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.pointer-events-none {
  pointer-events: none;
}

.select-none {
  user-select: none;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* Animation utilities */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn var(--transition-fast);
}

.animate-slide-up {
  animation: slideUp var(--transition-normal);
}