/* Base variables for colors, typography and spacing */
:root {
    /* Colors */
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-indigo: #667eea;
    --color-accent: #00ff88;
    --color-dark: #1a1a2e;
    --color-link: #3182ce;
    --color-white: #ffffff;

    /* Typography */
    --font-sans: "Poppins", sans-serif;
    --font-mono: monospace;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
}

body,
button, /* pre-commit:allow-button-style - regra base global de tipografia */
input,
select,
textarea {
    font-family: var(--font-sans);
}

:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid #43c6ff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Helper classes */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-white {
    color: #e8edf5;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-white { background-color: var(--color-white) !important; }