/* Caminho: public_html/assets/css/tokens.css
   Ponto único de verdade do design Salute 2026: cores, tipografia, espaço, raio e motion.
   Tema "Chama Noturna": carvão profundo, marfim quente e o gradiente de chama do logotipo. */
:root {
  color-scheme: dark;

  /* Cores base */
  --fundo: #0b0b0c;
  --fundo-2: #121214;
  --fundo-3: #1a1a1d;
  --superficie: #17171a;
  --superficie-vidro: rgba(255, 255, 255, 0.045);
  --texto: #f3ede2;
  --texto-2: #cdc6b8;
  --texto-3: #8f8a80;
  --linha: rgba(243, 237, 226, 0.12);
  --linha-forte: rgba(243, 237, 226, 0.26);

  /* Chama (acento) */
  --chama-1: #ff7a2f;
  --chama-2: #f2a93b;
  --chama-3: #ffd27a;
  --brasa: #c2410c;
  --acento: var(--chama-2);
  --acento-texto: #0b0b0c;
  --gradiente-chama: linear-gradient(120deg, var(--chama-1) 0%, var(--chama-2) 55%, var(--chama-3) 100%);
  --brilho-chama: 0 0 0 1px rgba(242, 169, 59, 0.25), 0 20px 60px -20px rgba(255, 122, 47, 0.55);

  /* Seções claras (marfim) */
  --marfim: #f3ede2;
  --marfim-2: #e9e1d3;
  --tinta: #141416;
  --tinta-2: #4a463f;

  /* Tipografia */
  --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --texto-base: clamp(15px, 0.95vw + 10px, 17px);
  --texto-pequeno: 13px;
  --rotulo: 11px;
  --display-1: clamp(56px, 9.6vw, 168px);
  --display-2: clamp(44px, 6.4vw, 108px);
  --display-3: clamp(32px, 3.6vw, 60px);
  --titulo-3: clamp(22px, 2vw, 30px);

  /* Espaço e grade */
  --max: 1680px;
  --margem: clamp(20px, 5vw, 96px);
  --espaco: clamp(96px, 12vw, 200px);
  --espaco-2: clamp(48px, 6vw, 112px);
  --gutter: clamp(16px, 2vw, 32px);
  --raio: 4px;
  --raio-2: 12px;
  --raio-3: 24px;
  --cabecalho-altura: 88px;

  /* Motion tokens */
  --instantaneo: 100ms;
  --rapido: 200ms;
  --padrao: 360ms;
  --expressivo: 800ms;
  --cinema: 1400ms;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-saida: cubic-bezier(0.55, 0, 1, 0.45);
  --curva-entrada: cubic-bezier(0, 0.55, 0.45, 1);
  --curva-cinema: cubic-bezier(0.76, 0, 0.24, 1);
  --entrada: 32px;
  --pressao: 0.97;
  --hover: 1.04;
  --stagger: 60ms;
}

:root[data-tema="claro"] {
  color-scheme: light;
  --fundo: #f3ede2;
  --fundo-2: #ebe4d6;
  --fundo-3: #e2dacb;
  --superficie: #fbf8f2;
  --superficie-vidro: rgba(20, 20, 22, 0.04);
  --texto: #141416;
  --texto-2: #3e3b35;
  --texto-3: #7a7468;
  --linha: rgba(20, 20, 22, 0.12);
  --linha-forte: rgba(20, 20, 22, 0.3);
  --acento: #c2410c;
  --acento-texto: #f3ede2;
  --brilho-chama: 0 0 0 1px rgba(194, 65, 12, 0.18), 0 20px 50px -20px rgba(194, 65, 12, 0.35);
  --marfim: #141416;
  --marfim-2: #1d1d21;
  --tinta: #f3ede2;
  --tinta-2: #cdc6b8;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --instantaneo: 0ms;
    --rapido: 0ms;
    --padrao: 0ms;
    --expressivo: 0ms;
    --cinema: 0ms;
    --entrada: 0px;
  }
}