/* 
REGRA INEGOCIÁVEL: As variáveis --brasa e --cor-crise SÓ PODEM SER USADAS 
no componente de aviso de crise (.aviso-crise). Qualquer outro uso 
falhará o lint do projeto. Não utilize para mensagens de erro comuns. 
*/

:root {
  /* Paleta Bruta */
  --tinta:  #1F1B24;
  --papel:  #FAF7F2;
  --areia:  #E8E1D6;
  --ameixa: #6B4A6E;
  --musgo:  #3F5B4C;
  --brasa:  #B4472E;

  /* Variações e Misturas (Derivadas por opacidade) */
  --tinta-suave: rgba(31, 27, 36, 0.7);
  --ameixa-hover: rgba(107, 74, 110, 0.85);
  --ameixa-suave: rgba(107, 74, 110, 0.1);
  --musgo-suave: rgba(63, 91, 76, 0.1);
  --areia-hover: rgba(232, 225, 214, 0.7);

  /* Tokens Semânticos */
  --cor-texto: var(--tinta);
  --cor-texto-suave: var(--tinta-suave);
  --cor-fundo: var(--papel);
  --cor-superficie: #FFFFFF;
  --cor-borda: var(--areia);
  
  --cor-acao: var(--ameixa);
  --cor-acao-hover: var(--ameixa-hover);
  
  --cor-sucesso: var(--musgo);
  --cor-atencao: #D4A373; /* Cor neutra para warnings normais */
  --cor-crise: var(--brasa);

  /* Tipografia Fluida (Razão 1.25) */
  --fonte-display: 'Newsreader', Georgia, serif;
  --fonte-corpo: 'Public Sans', system-ui, sans-serif;
  --fonte-dados: 'IBM Plex Mono', monospace;

  --t-base: clamp(1.06rem, 1vw + 0.8rem, 1.125rem); /* ~17px a 18px */
  --t-sm: calc(var(--t-base) / 1.25);
  --t-xs: calc(var(--t-sm) / 1.25);
  --t-lg: calc(var(--t-base) * 1.25);
  --t-xl: calc(var(--t-lg) * 1.25);
  --t-2xl: calc(var(--t-xl) * 1.25);
  --t-3xl: calc(var(--t-2xl) * 1.25);

  /* Espaçamento (4 8 12 16 24 32 48 64 96 128) */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --e-10: 8rem;

  /* Raios e Sombras */
  --raio-1: 4px;
  --raio-2: 8px;
  --raio-3: 16px;

  --sombra-1: 0 1px 3px rgba(31,27,36,0.05), 0 1px 2px rgba(31,27,36,0.03);
  --sombra-2: 0 4px 6px rgba(31,27,36,0.05), 0 2px 4px rgba(31,27,36,0.03);
  
  /* Transições */
  --transicao: 200ms ease-out;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta:  #FAF7F2;
    --papel:  #1F1B24;
    --areia:  #2C2733;
    --ameixa: #9C7D9E;
    --musgo:  #6D957E;
    --brasa:  #D2684F;
    --cor-superficie: #17131B;
    
    --tinta-suave: rgba(250, 247, 242, 0.7);
    --ameixa-hover: rgba(156, 125, 158, 0.85);
  }
}