/*
  tokens.css - Variaveis de design do SGLK
  Fonte de verdade: specs/design.md (secoes 3, 5, 6, 7, 12)
  Nao adicionar cor, tamanho ou tempo que nao venha do design.md.
*/

:root {
  /* --- Cor: azul-marinho (principal, secao 3.1) --- */
  --marinho-900: #0B2841;
  --marinho-700: #0C3E66;
  --marinho-100: #DCE5EE;
  --marinho-50:  #EEF2F6;

  /* --- Cor: verde-salvia (secundaria, secao 3.2) --- */
  --salvia-700: #45695F;
  --salvia-500: #648B81;
  --salvia-300: #9DBAB1;
  --salvia-200: #C5D6D0;
  --salvia-100: #E4EDE9;

  /* --- Cor: neutros (secao 3.3) --- */
  --branco: #FFFFFF;
  --off-white: #FBFAF8;
  --painel: #F2F1EF;
  --cinza-claro: #D7D8DC;
  --texto: #0B2841;
  --texto-suave: #4F5D6B;
  --texto-rodape: #B6C2CE;
  --borda-campo: #7A8592;
  --desabilitado-fundo: #ECEDEF;
  --desabilitado-texto: #6E7883;

  /* --- Cor: estados e contato (secao 3.4) --- */
  --disponivel: #45695F;
  --alugado: #636E7B;
  --sucesso: #45695F;
  --sucesso-fundo: #E4EDE9;
  --erro: #B3261E;
  --erro-fundo: #FDECEA;
  --aviso: #8A5300;
  --aviso-fundo: #FDF0DA;
  --info: #0C3E66;
  --info-fundo: #EEF2F6;
  --whatsapp: #15803D;
  --whatsapp-hover: #157A45;

  /* --- Tipografia (secao 4 e 5) --- */
  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tam-display: clamp(2rem, 1.36rem + 2.86vw, 3.5rem);
  --tam-titulo-1: clamp(1.75rem, 1.32rem + 1.9vw, 2.75rem);
  --tam-titulo-2: clamp(1.5rem, 1.18rem + 1.43vw, 2.25rem);
  --tam-titulo-3: clamp(1.25rem, 1.14rem + 0.48vw, 1.5rem);
  --tam-titulo-card: 1.125rem;
  --tam-preco: clamp(1.375rem, 1.32rem + 0.24vw, 1.5rem);
  --tam-abertura: clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem);
  --tam-texto: 1rem;
  --tam-botao: 1rem;
  --tam-pequeno: 0.875rem;

  /* --- Espacamento, base de 4px (secao 6) --- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;
  --esp-9: 96px;
  --esp-10: 128px;

  /* --- Raios (secao 7) --- */
  --raio-p: 4px;
  --raio-m: 12px;
  --raio-g: 16px;
  --raio-xg: 24px;
  --raio-total: 999px;

  /* --- Sombras, tingidas de azul-marinho (secao 7) --- */
  --sombra-1: 0 1px 2px rgba(11, 40, 65, 0.08);
  --sombra-2: 0 8px 24px rgba(11, 40, 65, 0.12);
  --sombra-3: 0 16px 40px rgba(11, 40, 65, 0.18);

  /* --- Movimento (secao 12) --- */
  --tempo-rapido: 150ms;
  --tempo-medio: 250ms;
  --tempo-lento: 350ms;
  --curva-entrada: cubic-bezier(0.2, 0, 0, 1);
  --curva-saida: cubic-bezier(0.4, 0, 1, 1);

  /* --- Grade (secao 6) --- */
  --largura-conteudo: 1200px;
  --margem-lateral: 16px;
}

@media (min-width: 768px) {
  :root { --margem-lateral: 24px; }
}

@media (min-width: 1200px) {
  :root { --margem-lateral: 32px; }
}