/**
 * Design system – softwarecustomizado.com.br
 * Identidade: seriedade, tecnologia, memória visual.
 */

:root {
  --color-dark: #0f172a;
  --color-dark-soft: #1e293b;
  --color-accent: #4f46e5;
  --color-accent-hover: #6366f1;
  --color-accent-light: #e0e7ff;
  --color-surface: #f8fafc;
  --color-surface-alt: #ffffff;
  --focus-ring: 2px solid var(--color-accent);
  --focus-offset: 2px;
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --radius-card: 0.75rem;
  --radius-btn: 0.5rem;
}

/* Tipografia: títulos com identidade */
.font-heading {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* Hero: fundo com grid sutil (tecnologia) */
.hero-pattern {
  background-color: var(--color-surface);
  background-image:
    linear-gradient(to right, rgb(0 0 0 / 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(0 0 0 / 0.02) 1px, transparent 1px);
  background-size: 2rem 2rem;
}

/* Label de seção (uppercase, tracking) */
.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}

/* Card com borda esquerda de destaque */
.card-accent {
  border-left: 3px solid var(--color-accent);
}

/* Acessibilidade */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

a:focus-visible,
button:focus-visible {
  border-radius: var(--radius-btn);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}