/* ==========================================================================
   WASHINTON BENTO — PSICÓLOGO
   Design System Base · v1.0
   Direção: editorial atemporal — sóbrio, contemporâneo, humano.
   Sem elementos vintage, sem estética de startup, sem estética hospitalar.

   Índice
   1.  Reset mínimo
   2.  Cores
   3.  Tipografia
   4.  Espaçamento
   5.  Layout (container + grid)
   6.  Bordas e raio
   7.  Sombra
   8.  Transições
   9.  Componentes: botões
   10. Componentes: cards
   11. Acessibilidade
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. RESET MÍNIMO
   Necessário para a escala tipográfica da seção 3 não colidir com margens
   padrão do navegador em h1–h3/p. Não é um reset completo — só o mínimo
   para o restante do sistema se comportar de forma previsível.
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 100%; /* baseline 16px — mantém os valores em rem previsíveis */
  -webkit-text-size-adjust: 100%;
}

body, h1, h2, h3, p, figure, blockquote {
  margin: 0;
}

img, picture, svg {
  display: block;
  max-width: 100%;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}


/* --------------------------------------------------------------------------
   2. CORES
   As 5 cores de marca ficam intactas como declaradas. Dois tokens
   adicionais são DERIVADOS delas, não fazem parte da paleta em si — existem
   só para resolver contraste em superfícies que carregam texto. Ver
   explicação abaixo do código.
   -------------------------------------------------------------------------- */
:root {
  /* Paleta de marca (exatamente como especificada) */
  --color-offwhite:      #F7F5F2;
  --color-grafite:       #2D3135;
  --color-terracota:     #C46B36;
  --color-petroleo:      #29515A;
  --color-cinza-quente:  #B9B3AA;

  /* Derivadas — uso funcional, não são "cor de marca" nova */
  --color-terracota-texto:    #A75B2E; /* terracota escurecida ~15%: garante AA em fundo de botão */
  --color-borda-interativa:   #827D77; /* cinza quente escurecido: garante 3:1 em borda de campo de formulário */

  /* Tokens semânticos — usar estes nomes no restante do projeto,
     nunca a cor "crua" diretamente em componentes */
  --color-bg:                  var(--color-offwhite);
  --color-bg-alt:               #FFFFFF; /* branco puro — uso pontual, ex. card sobre fundo off-white */
  --color-text:                var(--color-grafite);
  --color-text-secundario:      #5C6066; /* grafite aclarado, ~5.8:1 sobre --color-bg */
  --color-accent-primary:      var(--color-terracota);
  --color-accent-secondary:    var(--color-petroleo);
  --color-border:               var(--color-cinza-quente);      /* uso decorativo: divisores, borda de card */
  --color-border-interactive:  var(--color-borda-interativa);   /* uso funcional: inputs, elementos que precisam de contorno perceptível */
  --color-focus-ring:          var(--color-petroleo);
}


/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   Títulos: Cormorant Garamond. Corpo/interface: Inter.
   H1–H3 usam clamp() para escalar de forma fluida entre 375px e 1200px de
   viewport, dentro dos intervalos pedidos — evita saltos abruptos em
   breakpoint e serve melhor uma abordagem mobile-first.
   -------------------------------------------------------------------------- */
:root {
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-h1:          clamp(3rem, 2.66rem + 1.45vw, 3.75rem);     /* 48px → 60px */
  --text-h2:          clamp(2.375rem, 2.20rem + 0.73vw, 2.75rem); /* 38px → 44px */
  --text-h3:          clamp(1.75rem, 1.64rem + 0.48vw, 2rem);     /* 28px → 32px */
  --text-body:        1.125rem; /* 18px, fixo */
  --text-secundario:  1rem;     /* 16px, fixo */

  --weight-display-regular: 400;
  --weight-display-medium:  500;
  --weight-body-regular:    400;
  --weight-body-medium:     500;
  --weight-body-semibold:   600;

  --leading-display: 1.1;
  --leading-tight:   1.3;
  --leading-body:    1.65;

  --tracking-display: -0.01em;
  --tracking-label:    0.06em; /* uso futuro: eyebrows/labels em versalete */
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-regular);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display-medium);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

.text-secundario {
  font-size: var(--text-secundario);
  color: var(--color-text-secundario);
}


/* --------------------------------------------------------------------------
   4. ESPAÇAMENTO
   Escala de 10 degraus. Os dois tokens de seção usam clamp() para o
   espaço negativo crescer com a tela sem depender de breakpoints fixos —
   é o que sustenta a leitura "editorial" em vez de "página comprimida".
   -------------------------------------------------------------------------- */
:root {
  --space-3xs: 0.25rem; /* 4px */
  --space-2xs: 0.5rem;  /* 8px */
  --space-xs:  0.75rem; /* 12px */
  --space-sm:  1rem;    /* 16px */
  --space-md:  1.5rem;  /* 24px */
  --space-lg:  2rem;    /* 32px */
  --space-xl:  3rem;    /* 48px */
  --space-2xl: 4rem;    /* 64px */
  --space-3xl: 6rem;    /* 96px */
  --space-4xl: 8rem;    /* 128px */

  --space-section:    clamp(4rem, 3rem + 5vw, 10rem);      /* 64px → 160px — padding vertical de seção */
  --space-section-sm: clamp(2.5rem, 2rem + 2.5vw, 5rem);   /* 40px → 80px — seções menores */
}


/* --------------------------------------------------------------------------
   5. LAYOUT
   Container centralizado, 1200px máx. Grid mobile-first: 4 colunas no
   celular, 8 no tablet, 12 no desktop — permite composição assimétrica
   (ex. texto em 8 colunas, imagem em 4) em vez de simetria automática.
   -------------------------------------------------------------------------- */
:root {
  --container-max:     1200px;
  --container-padding: clamp(1.25rem, 4vw, 3rem); /* 20px → 48px de respiro lateral */
  --grid-gap:           var(--space-md);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(8, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, 1fr); }
}


/* --------------------------------------------------------------------------
   6. BORDAS E RAIO
   Linhas finas (1px), raio quase imperceptível. Evita tanto a aresta viva
   (fria demais) quanto o raio grande em pílula (lê como SaaS).
   -------------------------------------------------------------------------- */
:root {
  --border-width: 1px;
  --radius-sm: 2px;
  --radius-md: 3px;
}


/* --------------------------------------------------------------------------
   7. SOMBRA
   Um único token, discreto. A hierarquia visual vem de borda, tipografia
   e espaço — não de elevação.
   -------------------------------------------------------------------------- */
:root {
  --shadow-subtle: 0 1px 2px rgba(45, 49, 53, 0.04);
}


/* --------------------------------------------------------------------------
   8. TRANSIÇÕES
   -------------------------------------------------------------------------- */
:root {
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}


/* --------------------------------------------------------------------------
   9. BOTÕES
   Primário: fundo em --color-terracota-texto (não a terracota "crua" —
   ver nota de contraste), texto off-white. Secundário: transparente,
   borda e texto em grafite, inverte no hover.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-secundario);
  font-weight: var(--weight-body-medium);
  line-height: 1;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);
}

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

.btn-primary {
  background-color: var(--color-terracota-texto);
  border-color: var(--color-terracota-texto);
  color: var(--color-offwhite);
}

.btn-primary:hover:not(:disabled) {
  background-color: #8F4C25;
  border-color: #8F4C25;
}

.btn-primary:active:not(:disabled) {
  background-color: #7A4020;
  border-color: #7A4020;
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--color-grafite);
  color: var(--color-grafite);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-grafite);
  color: var(--color-offwhite);
}


/* --------------------------------------------------------------------------
   10. CARDS
   Sem sombra pesada. Borda discreta em cinza quente; no hover, a borda
   escurece para grafite e entra a sombra sutil — mudança de estado, não
   efeito decorativo.
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--color-bg-alt);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
  border-color: var(--color-grafite);
  box-shadow: var(--shadow-subtle);
}


/* --------------------------------------------------------------------------
   11. ACESSIBILIDADE
   -------------------------------------------------------------------------- */

/* Foco visível — nunca removido em elemento interativo */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

::selection {
  background-color: var(--color-petroleo);
  color: var(--color-offwhite);
}

/* Oculta visualmente mantendo acessível a leitor de tela — usado em rótulos
   de ícone (ex. botão de menu do Header) */
.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;
}

/* Link "pular para o conteúdo" — primeiro elemento focável da página,
   invisível até receber foco por teclado */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -3rem;
  z-index: 1;
  background-color: var(--color-grafite);
  color: var(--color-offwhite);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-secundario);
  text-decoration: none;
  transition: top var(--transition-fast);
}

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

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}