:root {
    --app-font-family: "Segoe UI", Arial, sans-serif;

    /* Tema base fallback */
    --app-bg: #0f172a;
    --app-bg-top: #111827;
    --app-surface: #1e293b;
    --app-border: #334155;

    --app-text: #ffffff;
    --app-text-soft: #e2e8f0;
    --app-text-muted: #94a3b8;
    --app-text-dim: #64748b;

    --app-primary: #22c55e;
    --app-secondary: #38bdf8;
    --app-primary-hover: #16a34a;

    --app-gradient: linear-gradient(135deg, var(--app-primary), var(--app-secondary));

    --header-bg: var(--app-surface);
    --header-border: var(--app-border);

    --footer-bg: var(--app-bg);
    --footer-text: var(--app-text-muted);
    --footer-border: var(--app-border);
    --footer-accent: var(--app-primary);

    --chat-text: var(--app-text-soft);
    --chat-user-author: var(--app-secondary);
    --chat-bot-author: var(--app-primary);
    --chat-datetime: var(--app-text-dim);
    --chat-scrollbar: var(--app-border);

    --form-bg: var(--app-surface);
    --form-border: var(--app-border);

    --input-bg: var(--app-bg);
    --input-border: var(--app-border);
    --input-text: var(--app-text-soft);
    --input-placeholder: var(--app-text-muted);
    --input-focus-border: var(--app-secondary);
    --input-focus-ring: rgba(56, 189, 248, 0.15);

    --button-bg: var(--app-primary);
    --button-bg-hover: var(--app-primary-hover);
    --button-text: #0f172a;

    --logo-box-fill: var(--app-surface);
    --logo-box-stroke: var(--app-secondary);
    --logo-accent-1: var(--app-primary);
    --logo-accent-2: var(--app-secondary);
    --logo-code: var(--app-text-muted);
    --logo-text: var(--app-text);
}

/* ===== CLASSIC ===== */
html.theme-classic {
    --app-bg: #0f172a;
    --app-bg-top: #111827;
    --app-surface: #1e293b;
    --app-border: #334155;

    --app-text: #ffffff;
    --app-text-soft: #e2e8f0;
    --app-text-muted: #94a3b8;
    --app-text-dim: #64748b;

    --app-primary: #22c55e;
    --app-secondary: #38bdf8;
    --app-primary-hover: #16a34a;
}

/* ===== AZUL ===== */
html.theme-azul {
    --app-bg: #08111f;
    --app-bg-top: #0d1a2b;
    --app-surface: #13243a;
    --app-border: #25476d;

    --app-text: #f8fbff;
    --app-text-soft: #dbeafe;
    --app-text-muted: #93c5fd;
    --app-text-dim: #60a5fa;

    --app-primary: #38bdf8;
    --app-secondary: #2563eb;
    --app-primary-hover: #0ea5e9;
}

/* ===== VERDE ===== */
html.theme-verde {
    --app-bg: #091610;
    --app-bg-top: #0d2016;
    --app-surface: #133323;
    --app-border: #24543a;

    --app-text: #f3fff7;
    --app-text-soft: #dcfce7;
    --app-text-muted: #86efac;
    --app-text-dim: #4ade80;

    --app-primary: #22c55e;
    --app-secondary: #14b8a6;
    --app-primary-hover: #16a34a;
}

/* ===== CINZA ===== */
html.theme-cinza {
    --app-bg: #0b1120;
    --app-bg-top: #131a2b;
    --app-surface: #1f2937;
    --app-border: #374151;

    --app-text: #ffffff;
    --app-text-soft: #e5e7eb;
    --app-text-muted: #9ca3af;
    --app-text-dim: #6b7280;

    --app-primary: #94a3b8;
    --app-secondary: #64748b;
    --app-primary-hover: #cbd5e1;

    --button-text: #0f172a;
}

/* ===== ROXO ===== */
html.theme-roxo {
    --app-bg: #0b1120;
    --app-bg-top: #131a2b;
    --app-surface: #1f2937;
    --app-border: #374151;

    --app-text: #ffffff;
    --app-text-soft: #e5e7eb;
    --app-text-muted: #9ca3af;
    --app-text-dim: #6b7280;

    --app-primary: #8b5cf6;
    --app-secondary: #38bdf8;
    --app-primary-hover: #7c3aed;
}

/* ===== CYAN ===== */
html.theme-cyan {
    --app-bg: #07111a;
    --app-bg-top: #0b1724;
    --app-surface: #132132;
    --app-border: #243447;

    --app-text: #ffffff;
    --app-text-soft: #dbeafe;
    --app-text-muted: #93c5fd;
    --app-text-dim: #64748b;

    --app-primary: #06b6d4;
    --app-secondary: #3b82f6;
    --app-primary-hover: #0891b2;
}

/* ===== MAGENTA ===== */
html.theme-magenta {
    --app-bg: #140b1a;
    --app-bg-top: #1c1025;
    --app-surface: #261735;
    --app-border: #3d2a52;

    --app-text: #ffffff;
    --app-text-soft: #f3e8ff;
    --app-text-muted: #c4b5fd;
    --app-text-dim: #8b5cf6;

    --app-primary: #ec4899;
    --app-secondary: #8b5cf6;
    --app-primary-hover: #db2777;
}

/* ===== LARANJA ===== */
html.theme-laranja {
    --app-bg: #1a0f0b;
    --app-bg-top: #25140f;
    --app-surface: #331c16;
    --app-border: #4a2b22;

    --app-text: #ffffff;
    --app-text-soft: #ffedd5;
    --app-text-muted: #fdba74;
    --app-text-dim: #9a3412;

    --app-primary: #f97316;
    --app-secondary: #ef4444;
    --app-primary-hover: #ea580c;
}