/* Espaço, forma, elevação e movimento */
:root {
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 20px;
  --espaco-6: 24px;
  --espaco-8: 32px;
  --espaco-10: 40px;
  --espaco-12: 48px;
  --espaco-16: 64px;

  --raio-xs: 6px;
  --raio-sm: 10px;
  --raio: 14px;
  --raio-lg: 20px;
  --raio-xl: 28px;
  --raio-pilula: 999px;

  --sombra-1: 0 1px 2px rgba(18, 26, 24, 0.06), 0 1px 1px rgba(18, 26, 24, 0.04);
  --sombra-2: 0 4px 14px rgba(18, 26, 24, 0.08), 0 1px 3px rgba(18, 26, 24, 0.06);
  --sombra-3: 0 16px 40px rgba(18, 26, 24, 0.16), 0 2px 6px rgba(18, 26, 24, 0.08);

  --transicao-rapida: 120ms cubic-bezier(0.2, 0, 0, 1);
  --transicao: 200ms cubic-bezier(0.2, 0, 0, 1);
  --transicao-lenta: 320ms cubic-bezier(0.2, 0, 0, 1);

  --largura-pagina: 1200px;
  --largura-estreita: 440px;
  --altura-controle-sm: 32px;
  --altura-controle: 40px;
  --altura-controle-lg: 48px;
}
[data-tema="escuro"] {
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 16px 40px rgba(0, 0, 0, 0.6);
}