/* CredCast — tokens de estrutura, 2026-11-12
   Não altera cor, tipo, raio nem a escala de espaço já definida em tokens.css.
   Importe depois de tokens.css. */
:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --container-sm: 640px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1120px;
  --container-max: 1280px;
  --gutter: var(--space-4);
  --gutter-lg: var(--space-6);
  --grid-columns: 12;
  --measure: 36rem;
  --header-height: 72px;
}

.cc-container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 1024px) {
  .cc-container { padding-inline: var(--gutter-lg); }
}
.cc-container--narrow {
  max-width: var(--container-md);
}
.cc-container--wide {
  max-width: var(--container-max);
}

.cc-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--gutter);
}
@media (min-width: 1024px) {
  .cc-grid { gap: var(--gutter-lg); }
}