@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root {
    --font-head-18-semiBold: 600 18px/110% "Manrope", sans-serif;
    --font-head-18-medium: 500 18px/130% "Manrope", sans-serif;
    --font-head-24-regular: 400 24px/130% "Manrope", sans-serif;

    --font-body-24-bold: 700 24px/110% "Manrope", sans-serif;
    --font-body-18-bold: 700 18px/110% "Manrope", sans-serif;
    --font-body-18-semiBold: 600 18px/110% "Manrope", sans-serif;
    --font-body-18-medium: 500 18px/130% "Manrope", sans-serif;
    --font-body-16-bold: 700 16px/110% "Manrope", sans-serif;
    --font-body-16-regular: 400 16px/110% "Manrope", sans-serif;
    --font-body-14-bold: 700 14px/120% "Manrope", sans-serif;
    --font-body-14-regular: 400 14px/130% "Manrope", sans-serif;
    --font-body-12-regular: 400 12px/130% "Manrope", sans-serif;
    --font-body-12-bold: 700 12px/130% "Manrope", sans-serif;

    --primary-color-base: #002c85;
    --primary-color-500: #1E40AF;
    --primary-color-400: #2563EB;
    --primary-color-300: #60A5FA;
    --primary-color-baseopacity-2: #0b1d4126;
    --primary-color-baseopacity-1: #0b1d411a;
    --primary-color-baseopacity-0: #0b1d410d;

    --secondary-color-base: #0A2458;
    --secondary-color-500: #1E3A8A;
    --secondary-color-400: #3B82F6;

    --gray-color-600: #0b1224;
    --gray-color-500: #0f1a2d;
    --gray-color-400: #15213b;
    --gray-color-300: #0d172a;
    --gray-color-200: #8aa0bf;
    --gray-color-100: #c9d4e3;

    --black-color-full: #3d60ca;
    --white-color-full: #FAFAFA;
    --default-100: var(--white-color-full);

    --red-color-alert: #EC4747;
}

* { box-sizing: border-box; font-family: 'Manrope', system-ui, -apple-system, sans-serif; }
body { background: linear-gradient(180deg, var(--primary-color-baseopacity-2) 0%, var(--primary-color-baseopacity-1) 40%, rgba(0, 0, 0, 0.92) 100%); color: var(--default-100); background-attachment: fixed; }

/* Cards e inputs alinhados à paleta Xtracky */
.dark-input { background-color: var(--gray-color-300); border-color: var(--gray-color-200); color: var(--default-100); }
.dark-input:focus { border-color: var(--primary-color-500); box-shadow: 0 0 0 3px var(--primary-color-baseopacity-1); outline: none; }
.stat-card { background: linear-gradient(135deg, var(--gray-color-400) 0%, var(--gray-color-500) 100%); border: 1px solid var(--gray-color-300); transition: all 0.3s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.3); }

/* Botões utilitários */
.x-btn-primary { background-color: var(--primary-color-500); }
.x-btn-primary:hover { background-color: var(--primary-color-400); }
.x-btn-danger { background-color: var(--red-color-alert); }
.x-btn-danger:hover { background-color: #d63e3e; }
.x-btn-neutral { background-color: var(--gray-color-500); }
.x-btn-neutral:hover { background-color: var(--gray-color-300); }
.x-ring { box-shadow: 0 0 0 3px var(--primary-color-baseopacity-1); }

/* Harmonização de utilitários Tailwind com paleta Xtracky */
.bg-blue-600 { background-color: var(--primary-color-500) !important; }
.bg-blue-500 { background-color: var(--primary-color-500) !important; }
.hover\:bg-blue-700:hover { background-color: var(--primary-color-400) !important; }
.bg-green-600 { background-color: var(--primary-color-500) !important; }
.hover\:bg-green-700:hover { background-color: var(--primary-color-400) !important; }
.bg-red-600 { background-color: var(--red-color-alert) !important; }
.hover\:bg-red-700:hover { background-color: #d63e3e !important; }
.bg-gray-900 { background-color: var(--gray-color-600) !important; }
.bg-gray-800 { background-color: var(--gray-color-500) !important; }
.bg-gray-700 { background-color: var(--gray-color-400) !important; }
.bg-gray-600 { background-color: var(--gray-color-300) !important; }
.border-gray-700 { border-color: var(--gray-color-300) !important; }
.text-gray-100 { color: var(--default-100) !important; }

/* Toggle knob azul quando ativo */
.peer:checked + div > div { background-color: var(--primary-color-500) !important; }

/* Scrollbar leve */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--gray-color-400); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--primary-color-base); }
::-webkit-scrollbar-thumb:hover { background: var(--primary-color-500); }