:root {
    --primary: #FF3131;
    --primary-light: #fff0f1;

    --text-primary: #3e3e3e;
    --text-secondary: #717171;
    --text-muted: #a6a6a6;

    --bg-page: #f7f7f7;
    --bg-white: #ffffff;
    --border: #eeeeee;
    --border-light: #f5f5f5;
    --border-input: #e0e0e0;

    --success: #50a773;
    --success-light: #e8f5e9;
    --warning: #f4a93b;
    --warning-light: #fff8e1;
    --info: #3483fa;
    --info-light: #e3f2fd;
    --error: #ea1d2c;
    --error-light: #ffebee;
    --whatsapp: #25d366;

    --raio-cartao: 12px;
    --raio-campo: 10px;

    --t-rapido: 160ms;
    --t-media: 280ms;
    --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);

    --t-marca-traco: 900ms;
    --t-marca-entrada: 520ms;
    --t-marca-giro: 1100ms;
    --t-marca-laco: 2600ms;
    --t-marca-onda: 1050ms;
}

@supports (background: color-mix(in srgb, red 8%, white)) {
    :root {
        --primary-light: color-mix(in srgb, var(--primary) 8%, #fff);
    }
}