/* ==========================================================================
   SEO Commerce - Folha de Estilos de Acessibilidade & Semântica
   Diretrizes WCAG 2.2 / WHATWG / specification.website
   ========================================================================== */

/* 1. Design Tokens & CSS Variables */
:root {
  --color-primary: #0b1c30;
  --color-primary-container: #131b2e;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #7c839b;
  --color-primary-fixed: #dae2fd;
  --color-primary-fixed-dim: #bec6e0;
  --color-secondary: #006c4a;
  --color-secondary-container: #82f5c1;
  --color-on-secondary-container: #00714e;
  --color-secondary-fixed: #85f8c4;
  --color-secondary-fixed-dim: #68dba9;
  --color-surface: #f8f9ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #eff4ff;
  --color-surface-container: #e5eeff;
  --color-surface-container-high: #dce9ff;
  --color-surface-container-highest: #d3e4fe;
  --color-surface-variant: #d3e4fe;
  --color-on-surface: #0b1c30;
  --color-on-surface-variant: #45464d;
  --color-outline: #76777d;
  --color-outline-variant: #c6c6cd;
  --color-tertiary-container: #370e00;
  --color-on-tertiary-container: #e45405;
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error: #ffffff;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --margin: 2rem;
  --margin-mobile: 1rem;
  --gutter: 1.5rem;
  --gutter-mobile: 1rem;
}

/* 2. Base Reset & Font Defaults */
html, body {
  margin: 0;
  padding: 0;
  background-color: #f8f9ff;
  color: #0b1c30;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  overscroll-behavior-y: none;
}

main > :first-child {
  margin-top: 0 !important;
}

main > :last-child {
  margin-bottom: 0 !important;
}

/* 3. Utilitários Resilientes de Espaçamento (Fallback Seguro) */
.gap-space-xs { gap: 0.25rem; }
.gap-space-sm { gap: 0.5rem; }
.gap-space-md { gap: 1rem; }
.gap-space-lg { gap: 1.5rem; }
.gap-space-xl { gap: 2.5rem; }
.gap-gutter { gap: 1.5rem; }
.gap-gutter-mobile { gap: 1rem; }

.p-space-xs { padding: 0.25rem; }
.p-space-sm { padding: 0.5rem; }
.p-space-md { padding: 1rem; }
.p-space-lg { padding: 1.5rem; }
.p-space-xl { padding: 2.5rem; }

.px-space-xs { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-space-sm { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-space-md { padding-left: 1rem; padding-right: 1rem; }
.px-space-lg { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-space-xl { padding-left: 2.5rem; padding-right: 2.5rem; }

.py-space-xs { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-space-sm { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-space-md { padding-top: 1rem; padding-bottom: 1rem; }
.py-space-lg { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-space-xl { padding-top: 2.5rem; padding-bottom: 2.5rem; }

.px-margin-mobile { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 1024px) {
  .lg\:px-margin { padding-left: 2rem; padding-right: 2rem; }
}

.mb-space-xs { margin-bottom: 0.25rem; }
.mb-space-sm { margin-bottom: 0.5rem; }
.mb-space-md { margin-bottom: 1rem; }
.mb-space-lg { margin-bottom: 1.5rem; }
.mb-space-xl { margin-bottom: 2.5rem; }

.mt-space-xs { margin-top: 0.25rem; }
.mt-space-sm { margin-top: 0.5rem; }
.mt-space-md { margin-top: 1rem; }
.mt-space-lg { margin-top: 1.5rem; }
.mt-space-xl { margin-top: 2.5rem; }

/* 4. Cores Semânticas de Superfície e Conteúdo */
.bg-surface { background-color: #f8f9ff; }
.bg-surface-container-lowest { background-color: #ffffff; }
.bg-surface-container-low { background-color: #eff4ff; }
.bg-surface-container { background-color: #e5eeff; }
.bg-surface-container-high { background-color: #dce9ff; }
.bg-surface-container-highest { background-color: #d3e4fe; }
.bg-primary { background-color: #0b1c30; }
.bg-primary-container { background-color: #131b2e; }
.bg-secondary { background-color: #006c4a; }
.bg-secondary-container { background-color: #82f5c1; }
.bg-secondary-fixed { background-color: #85f8c4; }
.bg-on-tertiary-container { background-color: #e45405; }
.bg-tertiary-container { background-color: #370e00; }
.bg-error-container { background-color: #ffdad6; }

.text-on-surface { color: #0b1c30; }
.text-on-surface-variant { color: #45464d; }
.text-secondary { color: #006c4a; }
.text-on-secondary { color: #ffffff; }
.text-on-secondary-container { color: #00714e; }
.text-secondary-fixed { color: #85f8c4; }
.text-on-primary { color: #ffffff; }
.text-on-primary-container { color: #7c839b; }
.text-on-tertiary { color: #ffffff; }
.text-on-tertiary-container { color: #e45405; }
.text-outline { color: #76777d; }
.text-outline-variant { color: #c6c6cd; }
.text-error { color: #ba1a1a; }

.border-surface-container { border-color: #e5eeff; }

/* 5. Escala Tipográfica do Benchmark */
.font-display-hero {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.font-display-hero-mobile {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.font-headline-xl {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.font-headline-lg {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.font-headline-md {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.font-headline-sm {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.005em;
  font-weight: 600;
}
.font-body-lg {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.005em;
  font-weight: 400;
}
.font-body-md {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0em;
  font-weight: 400;
}
.font-body-sm {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.005em;
  font-weight: 400;
}
.font-label-lg {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.01em;
  font-weight: 600;
}
.font-label-md {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.font-label-sm {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* 6. Link de Salto Acessível (Skip Link) */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background-color: #006c4a;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: top 0.2s ease-in-out;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  outline: 3px solid #85f8c4;
  outline-offset: 2px;
}

/* 7. Utilitário para Leitores de Tela (sr-only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only:focus,
.sr-only:focus-visible {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* 8. Indicadores de Foco Visível (WCAG 2.4.7 & 2.4.11) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid #006c4a !important;
  outline-offset: 3px !important;
}

/* 9. Preferências de Movimento Reduzido (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 10. Tabelas de Dados e Contêiner Responsivo */
.table-scroll-container {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.75rem;
}

.table-scroll-container:focus-visible {
  outline: 2px dashed #006c4a;
  outline-offset: 2px;
}

/* 11. Formatação de Código Semântico e Slugs */
code.semantic-slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  background-color: #eff4ff;
  color: #0b1c30;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  border: 1px solid #d3e4fe;
}

/* 12. Estilos de Impressão Semântica */
@media print {
  header,
  footer,
  .no-print,
  #formulario-analise,
  #diagnostico-formulario {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt !important;
  }

  main {
    padding-top: 0 !important;
  }

  table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  th, td {
    border: 1px solid #cccccc !important;
    padding: 6px 8px !important;
  }

  .sticky {
    position: static !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555555;
  }
}