/* Marca 4DOC Mentoring: creme, grafite e dourado, traço fino e geométrico.
   Só tokens. As regras ficam em ../styles.css, que é igual nas duas plataformas. */
:root {
  /* Fundo, superfícies e texto */
  --bg: #F6EDE4;
  --bg-2: #F0E6DA;
  --surface: #FCF8F3;
  --surface-2: #F4ECE2;
  --surface-3: #E9DFD2;
  --line: #E6DACB;
  --line-2: #D8C9B5;
  --text: #262A2D;
  --muted: #544E47;
  --faint: #6F665B;
  --shadow: 0 18px 50px rgba(70, 52, 28, 0.12);
  --rolagem: auto;
  --veu: rgba(38, 42, 45, 0.32);

  /* Destaque da marca: o dourado */
  --acento: #A78E66;
  --acento-2: #9C8158;
  --acento-texto: #7D6540;
  --acento-suave: rgba(167, 142, 102, 0.14);
  --ink: #262A2D;
  --ink-2: #3A3F43;
  --sobre-ink: #F6EDE4;
  --link-sublinhado: rgba(125, 101, 64, 0.35);
  --recomenda-borda: rgba(167, 142, 102, 0.45);
  --destaque-borda: rgba(167, 142, 102, 0.55);
  --avatar-borda: rgba(167, 142, 102, 0.4);
  --lanc-feito: rgba(167, 142, 102, 0.07);
  --mes-destaque: rgba(167, 142, 102, 0.1);

  /* Status */
  --red: #B3473C;
  --amber: #A5590A;
  --green: #3F7A55;
  --red-bg: rgba(179, 71, 60, 0.1);
  --amber-bg: rgba(165, 89, 10, 0.11);
  --green-bg: rgba(63, 122, 85, 0.11);
  --sobre-status: #FCF8F3;
  --foco-ruim: rgba(179, 71, 60, 0.07);
  --foco-ruim-borda: rgba(179, 71, 60, 0.22);
  --foco-bom: rgba(63, 122, 85, 0.08);
  --foco-bom-borda: rgba(63, 122, 85, 0.25);

  /* Campos e botões */
  --campo: #FFFDF9;
  --campo-dica: #9A9084;
  --foco-anel: rgba(167, 142, 102, 0.2);
  --versao-fundo: #FFFDF9;
  --btn-primario-peso: 500;
  --btn-desab-borda: var(--ink);

  /* Avisos flutuantes, dica dos gráficos e barra do mês no celular: grafite com texto creme */
  --aviso-fundo: var(--ink);
  --aviso-texto: #F6EDE4;
  --aviso-borda: 0;
  --dica-fundo: var(--ink);
  --dica-borda: 0;
  --dica-texto: #D9D1C5;
  --dica-forte: #FCF8F3;
  --dica-sombra: 0 10px 30px rgba(38, 42, 45, 0.25);
  --barra-fundo: var(--ink);
  --barra-texto: #F6EDE4;
  --barra-borda: 0;

  /* Gráficos em SVG */
  --graf-grade: rgba(38, 42, 45, 0.08);
  --graf-zero: rgba(38, 42, 45, 0.32);

  /* Fonte: Jost em tudo, títulos inclusive */
  --font: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-titulo: var(--font);
  --titulo-espaco: 0;
  --nav-fonte: 15px;
  --nav-espaco: 12px;

  /* Logo da barra lateral */
  --marca-largura: 118px;
  --marca-largura-celular: 58px;
  --marca-sub-espaco: 0.52em;

  /* Login: a arte da 4DOC sobre o creme, com as bordas esmaecidas */
  --login-fundo: none;
  --login-borda: 1px solid var(--line);
  --login-img: min(660px, 100%);
  --login-img-filtro: none;
  --login-img-mascara: radial-gradient(ellipse 70% 70% at 50% 50%, #000 62%, transparent 100%);
  --login-pad-celular: 24px 16px 0;
  --login-img-celular: min(340px, 100%);
  --login-form-pad-celular: 4px 16px 48px;
}