/* =====================================================
   DESIGN TOKENS — variáveis CSS globais
   Importar ANTES de styles1.css
   ===================================================== */

:root {
    /* Cores primárias */
    --color-primary:        #2563eb;
    --color-primary-dark:   #1d4ed8;
    --color-primary-light:  #eff6ff;
    --color-primary-shadow: rgba(37,99,235,0.3);

    /* Superfícies */
    --color-bg:             #f1f5f9;
    --color-surface:        #ffffff;
    --color-surface-alt:    #f8fafc;
    --color-border:         #e2e8f0;
    --color-border-light:   #f1f5f9;

    /* Texto */
    --color-text:           #1e293b;
    --color-text-muted:     #64748b;
    --color-text-subtle:    #94a3b8;

    /* Semânticas */
    --color-success:        #16a34a;
    --color-success-bg:     #dcfce7;
    --color-danger:         #dc2626;
    --color-danger-bg:      #fee2e2;
    --color-warning:        #d97706;
    --color-warning-bg:     #fef9c3;
    --color-purple:         #9333ea;
    --color-purple-bg:      #f3e8ff;
    --color-teal:           #0d9488;
    --color-teal-bg:        #ccfbf1;

    /* Sombras padronizadas */
    --shadow-sm:   0 1px 4px rgba(0,0,0,0.06);
    --shadow-md:   0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg:   0 4px 16px rgba(0,0,0,0.10);
    --shadow-xl:   0 8px 32px rgba(0,0,0,0.14);

    /* Raios */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* Transições */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.35s ease;

    /* Header */
    --header-height: 60px;
}

/* =====================================================
   DARK MODE
   ===================================================== */
[data-theme="dark"] {
    --color-bg:           #0f172a;
    --color-surface:      #1e293b;
    --color-surface-alt:  #263347;
    --color-border:       #334155;
    --color-border-light: #1e293b;
    --color-text:         #f1f5f9;
    --color-text-muted:   #94a3b8;
    --color-text-subtle:  #64748b;
    --color-primary-light: rgba(37,99,235,0.15);
    --shadow-sm:   0 1px 4px rgba(0,0,0,0.3);
    --shadow-md:   0 2px 8px rgba(0,0,0,0.35);
    --shadow-lg:   0 4px 16px rgba(0,0,0,0.4);
    --shadow-xl:   0 8px 32px rgba(0,0,0,0.5);
}

/* =====================================================
   APLICAÇÃO DOS TOKENS NOS COMPONENTES EXISTENTES
   ===================================================== */

body {
    background: var(--color-bg);
    color: var(--color-text);
    transition: background var(--transition-normal), color var(--transition-normal);
}

.section-card,
.form-card,
.item-card {
    background: var(--color-surface);
    border-color: var(--color-border-light);
    box-shadow: var(--shadow-sm);
}

.item-card {
    background: var(--color-surface-alt);
    border-color: var(--color-border-light);
}

.form-input,
.form-select,
.form-textarea {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    background: var(--color-surface);
    border-color: var(--color-primary);
}

.form-label { color: var(--color-text-muted); }
.form-input::placeholder { color: var(--color-text-subtle); }

.account-item { border-color: var(--color-border-light); }
.account-name { color: var(--color-text); }
.account-sub  { color: var(--color-text-subtle); }

.section-title { color: var(--color-text); }
.item-card-title { color: var(--color-text); }
.item-card-sub   { color: var(--color-text-subtle); }

.sidebar-link { color: var(--color-text-muted); }
.sidebar-link:hover,
.sidebar-link.active_desktop { background: var(--color-primary-light); color: var(--color-primary); }
.sidebar-divider { background: var(--color-border-light); }

[data-theme="dark"] aside#sidebar {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .bottom-sheet,
[data-theme="dark"] #chat-window {
    background: var(--color-surface);
    color: var(--color-text);
}

[data-theme="dark"] .bs-header,
[data-theme="dark"] #chat-input-area {
    border-color: var(--color-border);
}

[data-theme="dark"] .form-card-title {
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .btn-secondary {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
[data-theme="dark"] .btn-secondary:hover {
    background: var(--color-border);
}

[data-theme="dark"] .btn-icon {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}
[data-theme="dark"] .btn-icon:hover { background: var(--color-border); }

[data-theme="dark"] .footer-nav {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .footer-nav-item { color: var(--color-text-subtle); }
[data-theme="dark"] .footer-nav-item:hover,
[data-theme="dark"] .footer-nav-item.active {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

[data-theme="dark"] #chat-messages { background: var(--color-bg); }
[data-theme="dark"] .chat-msg.bot .chat-bubble {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] #chat-suggestions { background: var(--color-bg); border-color: var(--color-border); }
[data-theme="dark"] #chat-suggestions button {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}
[data-theme="dark"] #chat-input {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .shortcut-item {
    background: var(--color-surface);
    color: var(--color-text-muted);
}
[data-theme="dark"] .shortcut-item:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

[data-theme="dark"] .account-icon { background: var(--color-primary-light); }

/* =====================================================
   DARK MODE TOGGLE BUTTON
   ===================================================== */
#theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}
#theme-toggle:hover { background: rgba(255,255,255,0.25); }

/* =====================================================
   ANIMAÇÕES DE ENTRADA
   ===================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.animate-fade-up {
    animation: fadeInUp 0.3s ease both;
}
.animate-fade-up:nth-child(1) { animation-delay: 0.00s; }
.animate-fade-up:nth-child(2) { animation-delay: 0.05s; }
.animate-fade-up:nth-child(3) { animation-delay: 0.10s; }
.animate-fade-up:nth-child(4) { animation-delay: 0.15s; }
.animate-fade-up:nth-child(5) { animation-delay: 0.20s; }
.animate-fade-up:nth-child(6) { animation-delay: 0.25s; }

/* =====================================================
   LOADING STATE NOS BOTÕES
   ===================================================== */
.btn-loading {
    pointer-events: none;
    opacity: 0.75;
}
.btn-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================
   VALIDAÇÃO CLIENT-SIDE
   ===================================================== */
.form-input.valid,
.form-select.valid {
    border-color: var(--color-success);
    background: var(--color-surface-alt, #f8fafc);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.08);
}
.form-input.invalid,
.form-select.invalid {
    border-color: var(--color-danger);
    background: var(--color-surface-alt, #f8fafc);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}
/* Sem ícone SVG, sem padding extra — o feedback visual é só a borda + mensagem abaixo */
.field-hint {
    font-size: 0.7rem;
    margin-top: 4px;
    display: none;
    align-items: center;
    gap: 4px;
}
.field-hint.show { display: flex; }
.field-hint.error { color: var(--color-danger); }
.field-hint.success { color: var(--color-success); }

/* =====================================================
   SKELETON LOADING
   ===================================================== */
.skeleton {
    background: linear-gradient(90deg, var(--color-border-light) 25%, var(--color-border) 50%, var(--color-border-light) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--radius-md);
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =====================================================
   SWIPE HINT (navegação de mês)
   ===================================================== */
.swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.68rem;
    color: var(--color-text-subtle);
    margin-top: 6px;
    opacity: 0;
    animation: fadeIn 0.5s ease 1s forwards;
}
@media (min-width: 768px) { .swipe-hint { display: none; } }

/* =====================================================
   MELHORIAS GERAIS
   ===================================================== */

/* Scroll suave */
html { scroll-behavior: smooth; }

/* Foco visível para acessibilidade */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Seleção de texto */
::selection {
    background: var(--color-primary);
    color: white;
}

/* Scrollbar fina e temática */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; }

/* Transição suave em todos os cards */
.section-card,
.form-card,
.item-card,
.account-item,
.shortcut-item {
    transition: box-shadow var(--transition-fast), background var(--transition-fast);
}