/**
 * Saude Certa - Main Stylesheet
 * =============================
 * Arquivo principal que importa todos os módulos do Design System
 *
 * ORDEM DE IMPORTAÇÃO:
 * 1. Fonts - Definição das fontes
 * 2. Reset - Normalização do browser
 * 3. Design Tokens - Variables CSS
 * 4. Utilities - Classes utilitárias
 * 5. Components - Componentes (a serem adicionados na Fase 2)
 * 6. Animations - Animações (a serem adicionadas na Fase 5)
 *
 * @version 1.0.0
 */

/* ==========================================================================
   1. FONTS
   ========================================================================== */
@import url('./fonts.css');

/* ==========================================================================
   2. RESET
   ========================================================================== */
@import url('./reset.css');

/* ==========================================================================
   3. DESIGN TOKENS
   ========================================================================== */
@import url('./design-tokens.css');

/* ==========================================================================
   4. UTILITIES
   ========================================================================== */
@import url('./utilities.css');

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */
@import url('./components/buttons.css');
@import url('./components/header.css');
@import url('./components/footer.css');
@import url('./components/hero.css');
@import url('./components/cards.css');
@import url('./components/forms.css');
@import url('./components/tables.css');
@import url('./components/sections.css');

/* ==========================================================================
   6. ANIMATIONS
   ========================================================================== */
@import url('./animations.css');

/* ==========================================================================
   GLOBAL OVERRIDES
   ========================================================================== */

/**
 * Container padrão com largura máxima
 */
.sc-container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 768px) {
  .sc-container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .sc-container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/**
 * Seção padrão
 */
.sc-section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

@media (max-width: 768px) {
  .sc-section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}

/**
 * Seção com background claro
 */
.sc-section--light {
  background-color: var(--color-neutral-50);
}

/**
 * Seção com background escuro
 */
.sc-section--dark {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-100);
}

.sc-section--dark h1,
.sc-section--dark h2,
.sc-section--dark h3,
.sc-section--dark h4,
.sc-section--dark h5,
.sc-section--dark h6 {
  color: var(--color-neutral-0);
}

/**
 * Seção com background primário
 */
.sc-section--primary {
  background-color: var(--color-primary-600);
  color: var(--color-neutral-100);
}

.sc-section--primary h1,
.sc-section--primary h2,
.sc-section--primary h3,
.sc-section--primary h4,
.sc-section--primary h5,
.sc-section--primary h6 {
  color: var(--color-neutral-0);
}

/**
 * Título de seção
 */
.sc-section__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-neutral-800);
  margin-bottom: var(--space-4);
}

@media (max-width: 768px) {
  .sc-section__title {
    font-size: var(--text-3xl);
  }
}

.sc-section__subtitle {
  font-size: var(--text-lg);
  color: var(--color-neutral-500);
  max-width: 640px;
}

/**
 * Lead text (texto de destaque)
 */
.sc-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-neutral-600);
}

@media (min-width: 768px) {
  .sc-lead {
    font-size: var(--text-xl);
  }
}

/**
 * Divider
 */
.sc-divider {
  height: 1px;
  background-color: var(--color-neutral-200);
  border: none;
  margin: var(--space-8) 0;
}

/**
 * Badge
 */
.sc-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
}

.sc-badge--accent {
  background-color: var(--color-accent-100);
  color: var(--color-accent-700);
}

.sc-badge--success {
  background-color: var(--color-success-50);
  color: var(--color-success-700);
}

.sc-badge--warning {
  background-color: var(--color-warning-50);
  color: var(--color-warning-700);
}

.sc-badge--error {
  background-color: var(--color-error-50);
  color: var(--color-error-700);
}

/**
 * Skip Link (acessibilidade)
 */
.sc-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-primary-500);
  color: var(--color-neutral-0);
  border-radius: var(--radius-md);
  font-weight: var(--font-medium);
  transition: top var(--duration-200) var(--ease-out);
}

.sc-skip-link:focus {
  top: var(--space-4);
}

/**
 * Prose (conteúdo de texto longo)
 */
.sc-prose {
  max-width: 65ch;
  line-height: var(--leading-relaxed);
}

.sc-prose p {
  margin-bottom: var(--space-4);
}

.sc-prose h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.sc-prose h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.sc-prose ul,
.sc-prose ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.sc-prose ul {
  list-style-type: disc;
}

.sc-prose ol {
  list-style-type: decimal;
}

.sc-prose li {
  margin-bottom: var(--space-2);
}

.sc-prose a {
  color: var(--color-primary-500);
  text-decoration: underline;
}

.sc-prose a:hover {
  color: var(--color-primary-700);
}

.sc-prose blockquote {
  border-left: 4px solid var(--color-primary-200);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
  font-style: italic;
  color: var(--color-neutral-600);
}

.sc-prose code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background-color: var(--color-neutral-100);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.sc-prose pre {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-100);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: var(--space-6) 0;
}

.sc-prose pre code {
  background: none;
  padding: 0;
}

.sc-prose img {
  border-radius: var(--radius-lg);
  margin: var(--space-6) 0;
}

.sc-prose table {
  width: 100%;
  margin: var(--space-6) 0;
}

.sc-prose th,
.sc-prose td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-neutral-200);
}

.sc-prose th {
  font-weight: var(--font-semibold);
  background-color: var(--color-neutral-50);
}

/* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */

/**
 * Focus visible for better accessibility
 */
:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/**
 * Smooth scrolling (respects reduced motion)
 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/**
 * Selection color
 */
::selection {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

/**
 * Print styles
 */
@media print {
  .sc-header,
  .sc-footer,
  .sc-hero__scroll,
  .no-print {
    display: none !important;
  }

  .sc-hero {
    min-height: auto;
    padding: var(--space-8) 0;
  }

  body {
    font-size: 12pt;
  }
}

/**
 * Responsive hide utilities
 */
@media (max-width: 575px) {
  .hide-sm { display: none !important; }
}

@media (max-width: 767px) {
  .hide-md { display: none !important; }
}

@media (max-width: 991px) {
  .hide-lg { display: none !important; }
}

@media (min-width: 576px) {
  .show-sm-only { display: none !important; }
}

@media (min-width: 768px) {
  .show-md-only { display: none !important; }
}

@media (min-width: 992px) {
  .show-lg-only { display: none !important; }
}