:root {
    --grey-50: hsl(0, 0%, 100%);
    --grey-75: hsl(0, 0%, 96%);
    --grey-100: hsl(0, 0%, 76%);
    --grey-200: hsl(0, 0%, 56%);
    --grey-300: hsl(0, 0%, 36%);
    --grey-400: hsl(0, 0%, 19%);
    --grey-500: hsl(0, 0%, 16%);
    --grey-600: hsl(0, 0%, 14%);
    --grey-700: hsl(0, 0%, 12%);
    --grey-800: hsl(0, 0%, 9%);
    --grey-900: hsl(0, 0%, 7%);

    --blue-100: hsl(200, 100%, 81%);
    --blue-200: hsl(200, 100%, 68%);
    --blue-300: hsl(200, 100%, 55%);
    --blue-400: hsl(200, 100%, 42%);
    --blue-700: hsl(200, 100%, 19%);
    --blue-800: hsl(200, 100%, 14%);
    --blue-900: hsl(200, 100%, 9%);

    --green-100: hsl(139, 47%, 78%);
    --green-200: hsl(139, 48%, 61%);
    --green-300: hsl(139, 47%, 44%);

    --red-200: hsl(1, 83%, 71%);
    --red-300: hsl(1, 79%, 61%);
    --red-400: hsl(1, 75%, 51%);

    --orange-100: hsl(43, 96%, 78%);
    --orange-300: hsl(40, 96%, 56%);

    --purple-100: hsl(265, 63%, 82%);
    --purple-300: hsl(264, 64%, 66%);

    --pink-100: hsl(321, 100%, 84%);
    --pink-300: hsl(322, 99%, 64%);

    --brown-100: hsl(33, 44%, 69%);
    --brown-300: hsl(32, 44%, 53%);

    --body-background-top: var(--grey-700);
    --body-background-middle: var(--grey-800);
    --body-background-bottom: var(--grey-900);
    --body-text-color: var(--grey-75);
    --muted-text-color: var(--grey-200);
    --border-color: var(--grey-400);
    --border-hover-color: var(--grey-300);
    --navbar-background: var(--blue-800);
    --navbar-border: hsl(200, 100%, 21%);
    --navbar-divider: hsl(200, 100%, 24%);

    --primary-background: var(--blue-300);
    --primary-strong: var(--blue-400);
    --success-color: var(--green-200);
    --danger-color: var(--red-300);
    --warning-color: var(--orange-300);

    --fundo: var(--body-background-bottom);
    --superficie: var(--body-background-top);
    --poco: var(--body-background-middle);
    --linha: var(--border-color);
    --linha-suave: hsl(0, 0%, 15%);
    --texto: var(--body-text-color);
    --texto-2: hsl(0, 0%, 82%);
    --texto-3: hsl(0, 0%, 66%);
    --acento: var(--primary-background);
    --acento-contraste: hsl(200, 100%, 9%);

    --tom-neutro: var(--grey-100);
    --tom-ativo: var(--blue-300);
    --tom-bloqueado: var(--orange-300);
    --tom-concluido: var(--green-200);
    --tom-perigo: var(--red-200);
    --tom-autorizacao: var(--purple-300);

    --fonte: -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", "Source Sans Pro", Roboto,
        "Trebuchet MS", Arial, sans-serif;
    --fonte-numerica: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace;

    --raio-input: 0.25rem;
    --raio: 0.5rem;
    --raio-pill: 999px;
    --sombra-cartao: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
}