/* =========================================================================
   BARBEROS - TOKENS DE DESIGN · direção "Contemporary Editorial"
   Branco gelo, preto carvão e cinzas; vermelho queimado só em detalhes.
   Títulos em serifa expressiva (Instrument Serif), texto e interface em
   grotesca contemporânea (Schibsted Grotesk). Cantos quase retos, linhas
   finas no lugar de sombras. Fotos em P&B quente (--foto-filtro).
   ========================================================================= */
:root {
  --fundo: #f2f1ed;           /* branco gelo */
  --superficie: #f8f7f4;
  --superficie-2: #e9e7e1;
  --superficie-3: #dcd9d2;
  --linha: rgba(22, 21, 20, 0.14);
  --linha-forte: rgba(22, 21, 20, 0.28);
  --texto: #161514;           /* preto carvão */
  --texto-2: #4a4845;
  --texto-3: #6b6863;

  /* "marca" é a cor de ação da interface: carvão (botões, seleção) */
  --marca: #161514;
  --marca-forte: #000;
  --sobre-marca: #f2f1ed;
  --marca-suave: #e4e1da;
  --marca-texto: #161514;

  --acento: #a33a22;          /* vermelho queimado: detalhes, nunca áreas grandes */
  --acento-claro: #e0876c;    /* o mesmo vermelho para fundos escuros */
  --menta: var(--acento-claro); /* nome antigo, mantido por compatibilidade */

  --escuro: #161514;
  --escuro-2: #252321;
  --sobre-escuro: #f2f1ed;
  --sobre-escuro-2: rgba(242, 241, 237, 0.7);

  --perigo: #a33a22;
  --perigo-suave: #f3e3dd;
  --ok: #3f5f4a;
  --ok-suave: #e3e8e2;
  --demo-fundo: transparent;
  --demo-texto: #5c4b3c;
  --demo-linha: rgba(92, 75, 60, 0.35);

  --sombra-1: none;
  --sombra-2: 0 24px 60px -30px rgba(22, 21, 20, 0.45);
  --sombra-flutuante: 0 18px 40px -22px rgba(22, 21, 20, 0.55);

  --f-display: "Instrument Serif", "Times New Roman", serif;   /* títulos grandes */
  --f-titulo: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; /* títulos de interface, números */
  --f-texto: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --r-campo: 2px;
  --r-cartao: 2px;
  --r-grande: 4px;
  --r-pilula: 2px;

  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px;

  --lateral: 272px;
  --abas-altura: 74px;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --rapido: 0.18s;
  --medio: 0.3s;

  /* Tratamento único das fotos: P&B com um leve tom quente */
  --foto-filtro: grayscale(1) sepia(0.12) contrast(1.06);
  color-scheme: light;
}

/* Escuro: segue o sistema, a menos que o usuário escolha "Claro" no perfil */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #121110;
    --superficie: #1a1918;
    --superficie-2: #23211f;
    --superficie-3: #2e2c29;
    --linha: rgba(242, 241, 237, 0.14);
    --linha-forte: rgba(242, 241, 237, 0.28);
    --texto: #eeede9;
    --texto-2: #b5b2ab;
    --texto-3: #8f8c86;
    --marca: #eeede9;
    --marca-forte: #fff;
    --sobre-marca: #121110;
    --marca-suave: #2a2826;
    --marca-texto: #eeede9;
    --acento: #e0876c;
    --escuro: #201e1c;
    --escuro-2: #1d1b1a;
    --perigo: #e98f74;
    --perigo-suave: #3a201a;
    --ok: #9cb8a3;
    --ok-suave: #1f2a22;
    --demo-texto: #d8c3a8;
    --demo-linha: rgba(216, 195, 168, 0.35);
    --sombra-2: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
    --sombra-flutuante: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
    --foto-filtro: grayscale(1) sepia(0.1) contrast(1.04) brightness(0.92);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #121110;
  --superficie: #1a1918;
  --superficie-2: #23211f;
  --superficie-3: #2e2c29;
  --linha: rgba(242, 241, 237, 0.14);
  --linha-forte: rgba(242, 241, 237, 0.28);
  --texto: #eeede9;
  --texto-2: #b5b2ab;
  --texto-3: #8f8c86;
  --marca: #eeede9;
  --marca-forte: #fff;
  --sobre-marca: #121110;
  --marca-suave: #2a2826;
  --marca-texto: #eeede9;
  --acento: #e0876c;
  --escuro: #201e1c;
  --escuro-2: #1d1b1a;
  --perigo: #e98f74;
  --perigo-suave: #3a201a;
  --ok: #9cb8a3;
  --ok-suave: #1f2a22;
  --demo-texto: #d8c3a8;
  --demo-linha: rgba(216, 195, 168, 0.35);
  --sombra-2: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
  --sombra-flutuante: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  --foto-filtro: grayscale(1) sepia(0.1) contrast(1.04) brightness(0.92);
  color-scheme: dark;
}