/* =====================================================================
   tokens.css · Design system R3 Marketing
   ÚNICO arquivo do painel onde cor, fonte, raio e sombra são escritos.
   O resto do CSS usa só var(--...). Fonte de verdade: tokens.json do
   design system "R3 Marketing". Mudou aqui, mude lá (e vice-versa).
   ===================================================================== */

:root {
  /* Marca (não mudam com o tema) */
  --vinho: #9F2029;
  --dobra: #69060D;
  --preto: #000000;
  --branco-suave: #FAFAFA;
  --carvao: #101012;

  /* Tema claro */
  --surface: #FAFAFA;
  --ink: #000000;
  --cartao: #FFFFFF;
  --cartao-2: #FBFAF9;
  --linha: #E7E3E1;
  --linha-forte: #D6D0CD;
  --texto-suave: #5E5A61;
  --texto-fraco: #767178;
  --acento: #9F2029;
  --acento-texto: #9F2029;
  --acento-claro: #F7ECEC;
  --menu: #69060D;
  --menu-texto: rgba(255, 255, 255, .72);
  --menu-texto-ativo: rgba(255, 255, 255, .92);
  --menu-rotulo: rgba(255, 255, 255, .65);
  --ok: #2F7D5B;
  --atencao: #8F5A0E;
  --atencao-fundo: #FBF2E3;
  --info: #2D5BD7;
  --ruim: #B3261E;
  --sobre-acento: #FFFFFF; /* texto em cima de --acento */

  /* Fontes */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-sans: "Manrope", system-ui, sans-serif;

  /* Raios do sistema (nada acima de 8px, sem pílula) */
  --radius-sis-sm: 4px;
  --radius-sis: 6px;
  --radius-sis-card: 8px;

  /* Sombra: só no que flutua (menus, barra do celular, gaveta, janelas) */
  --sombra-flutua: 0 12px 28px -12px rgba(16, 16, 18, .45);

  /* Apelidos antigos: apontam para os novos para nada quebrar.
     Não use em código novo. Remova quando nenhum seletor usar mais. */
  --fundo: var(--surface);
  --texto: var(--ink);
  --card: var(--cartao);
  --hover: var(--cartao-2);
  --suave: var(--texto-suave);
  --fraco: var(--texto-fraco);
  --vinho-txt: var(--acento-texto);
  --rose: var(--acento-claro);
  --rose-txt: var(--acento-texto);
  --atencao-bg: var(--atencao-fundo);
  --parado: var(--ruim);
  --azul: var(--info);
  --menu-fechado: var(--menu);
  --menu-aberto: var(--menu);
}

/* Tema escuro escolhido em Minha conta */
html[data-tema="escuro"] {
  --surface: #101012;
  --ink: #FAFAFA;
  --cartao: #1C191D;
  --cartao-2: #221E23;
  --linha: #2B262C;
  --linha-forte: #342E35;
  --texto-suave: #B7AEB4;
  --texto-fraco: #928990;
  --acento: #B12A34;
  --acento-texto: #E5737B;
  --acento-claro: #2E1518;
  --menu: #1A0B0E;
  --ok: #5FB98E;
  --atencao: #E0A54B;
  --atencao-fundo: #2E2414;
  --info: #7FA1F5;
  --ruim: #F07A72;
  --sombra-flutua: 0 16px 36px -14px rgba(0, 0, 0, .6);
}

/* "Igual ao sistema" com o aparelho no escuro: mesmos valores */
@media (prefers-color-scheme: dark) {
  html[data-tema="sistema"] {
    --surface: #101012;
    --ink: #FAFAFA;
    --cartao: #1C191D;
    --cartao-2: #221E23;
    --linha: #2B262C;
    --linha-forte: #342E35;
    --texto-suave: #B7AEB4;
    --texto-fraco: #928990;
    --acento: #B12A34;
    --acento-texto: #E5737B;
    --acento-claro: #2E1518;
    --menu: #1A0B0E;
    --ok: #5FB98E;
    --atencao: #E0A54B;
    --atencao-fundo: #2E2414;
    --info: #7FA1F5;
    --ruim: #F07A72;
    --sombra-flutua: 0 16px 36px -14px rgba(0, 0, 0, .6);
  }
}

/* Espaço da Clínica: a cor da clínica entra pelo atributo style do <html>
   (ex.: style="--acento:#2B6CB0;--acento-texto:#2B6CB0;--acento-claro:#EAF1FA;--menu:#1E4E80").
   Só estas quatro mudam. Cores de situação (ok, atencao, info, ruim) nunca mudam. */