/*
 * Tokens do Doutor na Cadeira.
 *
 * PROPRIOS, deste repositorio. Nao herdam de nenhum outro app da casa: o
 * requisito e' que este repo seja completamente independente.
 *
 * TEMA CLARO POR PADRAO, e essa foi uma decisao com motivo, nao gosto. O app que
 * o Reginaldo construiu era escuro, mas:
 *   1. salao e ambiente MUITO iluminado, e tela escura sob luz forte perde
 *      contraste util;
 *   2. a ficha e lida POR CIMA DO OMBRO pela cliente, e claro le como registro
 *      profissional, escuro le como app de entretenimento;
 *   3. a ficha e' impressa (o "kit de impressao" e um dos order bumps), e
 *      imprimir tela escura desperdica tinta ou sai ilegivel.
 * Trocar para escuro e' mudar os valores de `[data-tema="escuro"]` abaixo, sem
 * tocar em componente nenhum.
 */

:root {
  /* ---- cor: marca ------------------------------------------------------ */
  /* Verde profundo. Escolhido por ser a cor do WhatsApp sem SER a do WhatsApp
     (o botao principal do produto e' "Chamar no WhatsApp"), e por nao colidir
     com a paleta de nenhum concorrente do levantamento. */
  --dnc-marca-900: #0b3d33;
  --dnc-marca-700: #12554a;
  --dnc-marca-500: #1a7f6b;
  --dnc-marca-300: #7fc3b4;
  --dnc-marca-100: #e3f2ee;

  /* ---- cor: superficie ------------------------------------------------- */
  --dnc-fundo: #f7f8f7;
  --dnc-superficie: #ffffff;
  --dnc-superficie-2: #f0f2f1;
  --dnc-borda: #d9ddda;
  --dnc-borda-forte: #b3bab6;

  /* ---- cor: texto ------------------------------------------------------ */
  --dnc-texto: #12201c;
  --dnc-texto-2: #566661;
  --dnc-texto-3: #7d8b86;
  --dnc-texto-inverso: #ffffff;

  /* ---- cor: estado ----------------------------------------------------- */
  --dnc-erro: #a3271f;
  --dnc-erro-fundo: #fdeceb;
  --dnc-aviso: #8a5a00;
  --dnc-aviso-fundo: #fdf3e2;
  --dnc-ok: #1a7f6b;
  --dnc-ok-fundo: #e3f2ee;

  /* ---- tipografia ------------------------------------------------------ */
  /* Stack de sistema: zero webfont. O publico esta no celular, muitas vezes em
     3G dentro do salao, e fonte externa e' render bloqueado por nada. */
  --dnc-fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* 16px de base no campo de formulario NAO e' escolha estetica: abaixo disso o
     Safari do iPhone da zoom automatico ao focar o input, e a tela "pula" no
     meio do atendimento. */
  --dnc-t-xs: 0.75rem;
  --dnc-t-sm: 0.875rem;
  --dnc-t-base: 1rem;
  --dnc-t-lg: 1.125rem;
  --dnc-t-xl: 1.375rem;
  --dnc-t-2xl: 1.75rem;

  --dnc-peso-normal: 400;
  --dnc-peso-medio: 550;
  --dnc-peso-forte: 680;

  /* ---- espaco ---------------------------------------------------------- */
  --dnc-e-1: 0.25rem;
  --dnc-e-2: 0.5rem;
  --dnc-e-3: 0.75rem;
  --dnc-e-4: 1rem;
  --dnc-e-5: 1.5rem;
  --dnc-e-6: 2rem;
  --dnc-e-7: 3rem;

  /* ---- forma ----------------------------------------------------------- */
  --dnc-raio-sm: 6px;
  --dnc-raio: 10px;
  --dnc-raio-lg: 16px;
  --dnc-raio-pill: 999px;

  --dnc-sombra-1: 0 1px 2px rgba(18, 32, 28, 0.06);
  --dnc-sombra-2: 0 4px 16px rgba(18, 32, 28, 0.1);

  /* ---- alvo de toque --------------------------------------------------- */
  /* 44px e' o minimo da diretriz da Apple e o piso pratico para dedo com unha
     de salao, que e' literalmente o publico deste app. */
  --dnc-toque: 44px;

  --dnc-largura-max: 640px;

  /* ---- layout de desktop ----------------------------------------------- */
  /* A barra lateral nasce RECOLHIDA (só ícones) e abre por hover ou foco,
     sobrepondo o conteúdo em vez de empurrá-lo. É o mesmo comportamento do
     Editor Acadêmico da casa, medido no fonte dele (240 / 60), mas os valores
     são declarados AQUI: nada é importado de outro repositório. */
  --dnc-lateral: 60px;
  --dnc-lateral-aberta: 240px;

  /* Formulário largo é formulário ruim de ler, então a ficha continua estreita
     mesmo no desktop. Quem ganha largura é a lista e a página da cliente. */
  --dnc-largura-larga: 900px;

  /* Documental: `@media` NÃO aceita `var()`, então o valor está escrito à mão
     nas media queries do base.css. Mudar aqui não muda lá. O ponto de corte é
     768px, o mesmo do Editor Acadêmico. */
  --dnc-desktop: 768px;

  /* ---- impressao ------------------------------------------------------- */
  /* Papel e sempre branco e a borda precisa aparecer em tinta preta, entao
     estes NAO seguem o tema: sao fixos de proposito, e existem como token so
     para que `base.css` continue sem nenhum valor literal. */
  --dnc-print-fundo: #ffffff;
  --dnc-print-borda: #999999;
}

[data-tema="escuro"] {
  --dnc-fundo: #0f1513;
  --dnc-superficie: #18211e;
  --dnc-superficie-2: #212b28;
  --dnc-borda: #2e3a36;
  --dnc-borda-forte: #445049;
  --dnc-texto: #eef2f0;
  --dnc-texto-2: #a7b3ae;
  --dnc-texto-3: #7d8b86;
  --dnc-marca-500: #2ea88c;
  --dnc-marca-100: #14302a;
  --dnc-erro-fundo: #2e1614;
  --dnc-aviso-fundo: #2c2211;
  --dnc-ok-fundo: #14302a;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}