/* 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;

    /* Semantic UI colors */
    --color-action-view: #4ba0ff;
    --color-warning: #f2c94c;
    --color-success-bright: #22c55e;
    --color-focus: #4ba0ff;
    --color-surface-page: #0b1224;
    --color-surface: #0f172a;
    --color-surface-raised: #111827;
    --color-surface-hover: #162238;
    --color-border-subtle: rgba(148, 163, 184, 0.38);
    --color-border-hover: rgba(148, 163, 184, 0.62);
    --color-text-strong: #e2e8f0;
    --color-text-body: #e8edf5;
    --color-text-muted: #94a3b8;

    /* 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;

    /* Motion */
    --ui-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ui-transition-interactive:
        color 200ms var(--ui-ease-out),
        background-color 200ms var(--ui-ease-out),
        border-color 200ms var(--ui-ease-out),
        box-shadow 200ms var(--ui-ease-out),
        opacity 200ms var(--ui-ease-out),
        transform 200ms var(--ui-ease-out),
        filter 200ms var(--ui-ease-out);
}

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 var(--color-focus);
    outline-offset: 3px;
}

.ui-skip-link {
    position: fixed;
    inset-block-start: var(--space-sm);
    inset-inline-start: var(--space-sm);
    z-index: 12000;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-focus);
    border-radius: 8px;
    background: var(--color-surface-raised);
    color: var(--color-text-strong);
    font-weight: 700;
    opacity: 0;
    transform: translateY(calc(-100% - var(--space-md)));
    transition: var(--ui-transition-interactive);
}

.ui-skip-link:focus {
    color: var(--color-text-strong);
    opacity: 1;
    transform: translateY(0);
}

.ui-access-state {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin-block: var(--space-md);
    padding: 12px 16px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 10px;
    background: var(--color-surface-raised);
    color: var(--color-text-body);
}

.ui-access-state__icon {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.ui-access-state__icon svg {
    width: 18px;
    height: 18px;
}

.ui-access-state__content {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ui-access-state__title {
    color: var(--color-text-strong);
    font-size: 0.95rem;
}

.ui-access-state__description {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.ui-access-state--readonly {
    border-color: rgba(242, 201, 76, 0.42);
}

.ui-access-state--readonly .ui-access-state__icon {
    background: rgba(242, 201, 76, 0.14);
    color: var(--color-warning);
}

.ui-access-state--restricted {
    border-color: rgba(75, 160, 255, 0.42);
}

.ui-access-state--restricted .ui-access-state__icon {
    background: rgba(75, 160, 255, 0.14);
    color: var(--color-action-view);
}

@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; }