:root {
    --ds-font-sans: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Brand semantic tokens */
    --color-brand-600: #2563eb;
    --color-brand-700: #1d4ed8;
    --color-accent-600: #0ea5a4;
    --color-accent-700: #0f766e;
    --color-success-600: #16a34a;
    --color-warning-600: #d97706;
    --color-danger-600: #dc2626;
    --color-info-600: #0284c7;

    /* Neutral tokens */
    --color-neutral-900: #111827;
    --color-neutral-700: #374151;
    --color-neutral-500: #6b7280;
    --color-neutral-300: #d1d5db;
    --color-neutral-200: #e5e7eb;
    --color-neutral-100: #f3f4f6;
    --color-neutral-50: #f9fafb;

    /* Legacy aliases used by current CSS */
    --ds-color-primary: var(--color-brand-600);
    --ds-color-primary-strong: var(--color-brand-700);
    --ds-color-text: var(--color-neutral-900);
    --ds-color-muted: var(--color-neutral-500);
    --ds-color-border: #d8dfeb;
    --ds-color-surface: #ffffff;
    --ds-color-surface-soft: #f7f9fc;
    --color-role-student-bg: #dbeafe;
    --color-role-student-text: #1e3a8a;
    --color-role-student-border: #bfdbfe;

    --ds-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.3);
    --ds-radius-sm: 8px;
    --ds-radius-md: 12px;
    --ds-radius-lg: 16px;
    --ds-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.08);
    --ds-shadow-md: 0 10px 24px rgba(15, 23, 42, 0.12);
    --ds-space-1: 0.25rem;
    --ds-space-2: 0.5rem;
    --ds-space-3: 0.75rem;
    --ds-space-4: 1rem;
    --ds-space-5: 1.25rem;
    --ds-space-6: 1.5rem;

    /* Bootstrap color bridge (BS4/BS5) */
    --primary: var(--color-brand-600);
    --secondary: var(--color-accent-600);
    --success: var(--color-success-600);
    --warning: var(--color-warning-600);
    --danger: var(--color-danger-600);
    --info: var(--color-info-600);
    --dark: var(--color-neutral-900);
    --light: var(--color-neutral-50);
    --bs-primary: var(--color-brand-600);
    --bs-secondary: var(--color-accent-600);
    --bs-success: var(--color-success-600);
    --bs-warning: var(--color-warning-600);
    --bs-danger: var(--color-danger-600);
    --bs-info: var(--color-info-600);
    --bs-dark: var(--color-neutral-900);
    --bs-light: var(--color-neutral-50);
}

html, body {
    font-family: var(--ds-font-sans);
    color: var(--ds-color-text);
}

.container,
.container-fluid {
    --bs-gutter-x: 1.5rem;
}

a {
    text-underline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring) !important;
    border-radius: var(--ds-radius-sm);
}

.btn {
    border-radius: var(--ds-radius-sm);
    min-height: 44px;
    font-weight: 600;
}

.btn-sm {
    min-height: 36px;
}

.btn-primary,
.btn-gradient {
    background: linear-gradient(135deg, var(--ds-color-primary), var(--ds-color-primary-strong));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px rgba(45, 108, 246, 0.2);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-gradient:hover,
.btn-gradient:focus {
    background: linear-gradient(135deg, #2b63e2, #1c469b);
    color: #fff;
}

.btn-outline-primary {
    border-color: var(--ds-color-primary);
    color: var(--ds-color-primary);
}

.btn-outline-primary:hover {
    background: #eaf0ff;
    color: var(--ds-color-primary-strong);
}

.card {
    border-radius: var(--ds-radius-md);
    border-color: var(--ds-color-border);
}

.card:not(.card-outline):not(.card-primary):not(.card-secondary):not(.card-success):not(.card-danger):not(.card-warning):not(.card-info):not(.card-dark):not(.card-light) {
    box-shadow: var(--ds-shadow-sm);
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    border-radius: var(--ds-radius-sm);
    border-color: var(--ds-color-border);
    min-height: 44px;
}

textarea {
    min-height: 110px;
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--ds-color-muted);
}

.table thead th {
    border-bottom-width: 1px;
    border-color: var(--ds-color-border);
    font-weight: 700;
}

.table td,
.table th {
    vertical-align: middle;
}

.badge {
    border-radius: 999px;
    padding: 0.4em 0.72em;
    font-weight: 600;
}

.navbar .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.modal-content {
    border-radius: var(--ds-radius-lg);
    border-color: var(--ds-color-border);
}

/* Auth error modal: force opaque surface and readable contrast */
#authErrorModal .modal-content {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32) !important;
}

#authErrorModal .modal-title,
#authErrorModal .modal-body,
#authErrorModal [data-auth-error-modal-message] {
    color: #0f172a !important;
}

body.theme-dark #authErrorModal .modal-content {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
}

body.theme-dark #authErrorModal .modal-title,
body.theme-dark #authErrorModal .modal-body,
body.theme-dark #authErrorModal [data-auth-error-modal-message] {
    color: #e2e8f0 !important;
}

/* Verify e-mail modal: keep opaque surface in both themes */
#verifyEmailModal .modal-content {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32) !important;
}

#verifyEmailModal .modal-title,
#verifyEmailModal .modal-body,
#verifyEmailModal .text-muted {
    color: #0f172a !important;
}

body.theme-dark #verifyEmailModal .modal-content {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
}

body.theme-dark #verifyEmailModal .modal-title,
body.theme-dark #verifyEmailModal .modal-body,
body.theme-dark #verifyEmailModal .text-muted {
    color: #e2e8f0 !important;
}

.content-wrapper,
main {
    background: transparent;
}

/* --- UX hardening: auth, checkout, admin tables/forms --- */
.auth-shell {
    padding-top: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.auth-card,
.plan-card,
.summary-card {
    background: var(--ds-color-surface);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-sm);
}

.auth-card {
    padding: clamp(1.25rem, 2vw, 2rem);
}

.auth-card h1,
.plan-card h2,
.summary-card h1 {
    color: var(--color-neutral-900);
    letter-spacing: -0.01em;
}

.checkout-container .badge.bg-primary-subtle,
.checkout-container .text-primary-emphasis {
    color: var(--color-brand-700) !important;
}

.alert {
    border-radius: var(--ds-radius-sm);
    border-width: 1px;
}

.alert-danger {
    border-color: rgba(220, 38, 38, 0.28);
}

.form-label {
    font-weight: 600;
    color: var(--color-neutral-700);
}

.form-text {
    color: var(--color-neutral-500);
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-color: var(--color-danger-600);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16);
}

/* Admin action density: keep readability + click comfort */
.is-admin .card .table td,
.is-admin .card .table th {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.is-admin .table .btn.btn-sm {
    min-height: 32px;
}

.is-admin .table .badge {
    font-weight: 700;
}

.is-admin .action-cell {
    white-space: nowrap;
}

.is-admin .btn-icon-action {
    border-radius: 8px;
}

.is-admin .btn-icon-action:hover,
.is-admin .btn-icon-action:focus {
    background: rgba(37, 99, 235, 0.08);
}

.is-admin .btn-icon-action.text-danger:hover,
.is-admin .btn-icon-action.text-danger:focus {
    background: rgba(220, 38, 38, 0.1);
}

/* DataTables search/input consistency */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-color-border);
    min-height: 38px;
}

/* Modal text contrast refinements (front padrão, sem troca de tema) */
.login-modal .text-muted,
.login-modal p.text-muted,
.login-modal .form-text,
.login-modal .modal-body p,
.login-modal .modal-body .small {
    color: #111827 !important;
}

.login-modal .modal-title,
.login-modal .form-label,
.login-modal .modal-header .modal-title,
.login-modal .forgot-password-modal .modal-title {
    color: #020617 !important;
}

/* Select do cadastro (Tipo de conta) com melhor legibilidade */
.login-modal select.form-control,
.login-modal select.form-select,
.login-modal #register-role-select {
    color: #0f172a !important;
}

.login-modal #register-role-select option[disabled],
.login-modal #register-role-select option[value=""] {
    color: #334155 !important;
}

.theme-dark .login-modal .text-muted,
.theme-dark .login-modal p.text-muted,
.theme-dark .login-modal .form-text {
    color: #cbd5e1 !important;
}

.theme-dark .login-modal .modal-title,
.theme-dark .login-modal .form-label {
    color: #ffffff !important;
}

/* Links e microtextos do modal com contraste melhor */
.login-modal .text-muted a,
.login-modal .modal-body a.text-decoration-underline,
.login-modal .modal-body a {
    color: #0f172a !important;
    font-weight: 700;
}

.login-modal .text-muted a:hover,
.login-modal .modal-body a:hover {
    color: #1e3a8a !important;
}

.theme-dark .login-modal .modal-header {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(30, 64, 175, 0.35)) !important;
}

.theme-dark .login-modal .text-muted a {
    color: #93c5fd !important;
}

.theme-dark .login-modal .text-muted a:hover {
    color: #bfdbfe !important;
}

/* Terms modal aligned with auth modal pattern */
.terms-modal .modal-dialog {
    max-width: 860px;
}

.terms-modal .modal-body {
    color: #0f172a;
    line-height: 1.6;
}

.terms-modal .modal-body h6 {
    color: #020617;
    font-weight: 700;
}

.theme-dark .terms-modal .modal-body {
    color: #e5e7eb;
}

.theme-dark .terms-modal .modal-body h6 {
    color: #ffffff;
}

/* Termos + checkbox com contraste maior */
.login-modal .form-check-label,
.login-modal .form-check-label,
.login-modal .form-check-label a {
    color: #0f172a !important;
}

.login-modal .form-check-label a {
    font-weight: 700;
}

.login-modal .form-check-input {
    border-color: #334155 !important;
    background-color: #ffffff;
}

.login-modal .form-check-input:checked {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

.login-modal .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(29, 78, 216, 0.25) !important;
}

.theme-dark .login-modal .form-check-label,
.theme-dark .login-modal .form-check-label a {
    color: #e5e7eb !important;
}

.theme-dark .login-modal .form-check-input {
    border-color: #93c5fd !important;
    background-color: #0f172a;
}

/* Dark mode contrast refinements (admin actions + tables) */
.theme-dark .btn-link.text-dark,
.theme-dark .btn.text-dark {
    color: #e5e7eb !important;
}

.theme-dark .btn-icon-action:hover,
.theme-dark .btn-icon-action:focus {
    background: rgba(255, 255, 255, 0.12);
}

.theme-dark .table,
.theme-dark .table td,
.theme-dark .table th {
    color: #e5e7eb;
}

.theme-dark .dataTables_wrapper .dataTables_filter input,
.theme-dark .dataTables_wrapper .dataTables_length select {
    background: #111827;
    color: #e5e7eb;
    border-color: #374151;
}