/* Cores, fontes e espaçamentos do site. Só aqui. */
:root {
  /* Cores */
  --cor-fundo: #000000;
  --cor-texto: #ffffff;
  --cor-texto-suave: rgba(255, 255, 255, 0.75);
  --cor-linha: rgba(255, 255, 255, 0.2);
  --cor-botao: #db4300;          /* com texto preto: 4,81 para 1 */
  --cor-texto-botao: #000000;
  --cor-destaque: #ff8a00;       /* sobre preto: 8,89 para 1 */
  --cor-apoio: #dd7c51;          /* com texto preto: 7,08 para 1 */
  --cor-texto-apoio: #000000;
  --cor-escurecer: rgba(0, 0, 0, 0.8);   /* celular: texto ocupa a tela toda */
  --desfoque-fundo: 4px;
  --desfoque-fundadora: 8px; /* só na faixa onde a foto encontra o preto; o rosto fica nítido */
  /* celular: foto no topo da seção, quase sem escurecer, e preto onde o texto começa */
  --escurecer-fundadora: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0.15) 45vw, #000000 105vw);

  /* Fontes */
  --fonte-titulo: "Oswald", "Arial Narrow", sans-serif;
  --fonte-texto: "Inter", system-ui, sans-serif;
  --peso-titulo: 700;
  --peso-texto: 400;
  --peso-forte: 600;

  /* Tamanhos, celular */
  --tamanho-base: 17px;
  --tamanho-titulo-principal: 44px;
  --tamanho-titulo-secao: 40px;
  --tamanho-titulo-cartao: 20px;
  --tamanho-numero: 40px;
  --tamanho-sobrancelha: 14px;
  --tamanho-citacao: 20px;

  /* Espaçamentos, celular */
  --espaco-lateral: 20px;
  --espaco-secao: 56px;
  --espaco-bloco: 28px;
  --espaco-pequeno: 14px;
  --largura-maxima: 1120px;

  /* Tela do app: mesmo cinza-escuro do fundo dos prints */
  --cor-tela-app: #121212;

  /* Barra do topo */
  --altura-topo: 64px;
  --cor-fundo-topo: rgba(0, 0, 0, 0.92);

  /* Formas */
  --altura-botao: 56px;
  --altura-toque: 48px;
  --raio-botao: 12px;
  --raio-cartao: 16px;
}

/* Computador */
@media (min-width: 900px) {
  :root {
    --tamanho-base: 18px;
    --tamanho-titulo-principal: 80px;
    --tamanho-titulo-secao: 64px;
    --tamanho-titulo-cartao: 22px;
    --tamanho-numero: 56px;
    --tamanho-sobrancelha: 15px;
    --tamanho-citacao: 24px;
    --espaco-lateral: 40px;
    --espaco-secao: 112px;
    --espaco-bloco: 44px;
    --espaco-pequeno: 18px;
    /* computador: escuro atrás do texto, mais claro à direita, onde a foto aparece */
    --cor-escurecer: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.8) 55%, rgba(0, 0, 0, 0.25) 100%);
    /* computador: preto atrás do texto, à esquerda; a foto aparece à direita */
    --escurecer-fundadora: linear-gradient(90deg, #000000 0%, #000000 50%, rgba(0, 0, 0, 0.2) 100%);
  }
}