/* ==========================================================================
   MOONBASE BETA — BESPOKE DESIGN SYSTEM TOKENS (UI-SLOP 100 / WCAG AAA)
   ========================================================================== */

:root, [data-theme="dark"] {
    /* 🌙 1. Fundo Semântico (Lunar Obsidian) */
    --bg-void: #06080d;
    --bg-canvas: #090d15;
    --bg-surface: #0e1422;
    --bg-elevated: #141c2e;
    --bg-input: #111827;
    --bg-input-focus: #172138;
    --bg-hover: rgba(255, 255, 255, 0.04);
    
    /* 🎨 2. Acentos de Marca (Ion Cyan & Champagne Gold) */
    --accent-cyan: #38bdf8;
    --accent-cyan-hover: #7dd3fc;
    --accent-cyan-subtle: rgba(56, 189, 248, 0.12);
    --accent-gold: #dfbe7a;
    --accent-gold-subtle: rgba(223, 190, 122, 0.12);

    /* 🛡️ 3. Status Semânticos */
    --status-success: #10b981;
    --status-success-bg: rgba(16, 185, 129, 0.15);
    --status-warning: #f59e0b;
    --status-warning-bg: rgba(245, 158, 11, 0.15);
    --status-danger: #ef4444;
    --status-danger-bg: rgba(239, 68, 68, 0.15);

    /* 📝 4. Tipografia & Contraste WCAG AAA (Mínimo 7:1) */
    --text-primary: #ffffff;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-accent: #38bdf8;

    /* 🔲 5. Bordas e Linhas Estruturais */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-highlight: rgba(56, 189, 248, 0.35);
    --border-focus: #38bdf8;

    /* 💬 6. Balões de Chat e Notas Internas */
    --bubble-contact-bg: #1e293b;
    --bubble-contact-text: #ffffff;
    --bubble-agent-bg: #0369a1;
    --bubble-agent-text: #ffffff;
    --bubble-ai-bg: #064e3b;
    --bubble-ai-text: #6ee7b7;
    --bubble-internal-bg: #78350f;
    --bubble-internal-text: #fef3c7;

    /* 📐 7. Geometria e Fontes */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 9999px;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

[data-theme="light"] {
    /* ☀️ 1. Fundo Semântico (Moonbase Alabaster) */
    --bg-void: #f1f5f9;
    --bg-canvas: #f8fafc;
    --bg-surface: #ffffff;
    --bg-elevated: #f1f5f9;
    --bg-input: #ffffff;
    --bg-input-focus: #f8fafc;
    --bg-hover: rgba(0, 0, 0, 0.03);

    /* 🎨 2. Acentos de Marca */
    --accent-cyan: #0284c7;
    --accent-cyan-hover: #0369a1;
    --accent-cyan-subtle: rgba(2, 132, 199, 0.1);
    --accent-gold: #b45309;
    --accent-gold-subtle: rgba(180, 83, 9, 0.1);

    /* 🛡️ 3. Status Semânticos */
    --status-success: #059669;
    --status-success-bg: #dcfce7;
    --status-warning: #d97706;
    --status-warning-bg: #fef3c7;
    --status-danger: #dc2626;
    --status-danger-bg: #fee2e2;

    /* 📝 4. Tipografia & Contraste WCAG AAA */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-accent: #0284c7;

    /* 🔲 5. Bordas */
    --border-subtle: #e2e8f0;
    --border-highlight: rgba(2, 132, 199, 0.3);
    --border-focus: #0284c7;

    /* 💬 6. Balões de Chat */
    --bubble-contact-bg: #e2e8f0;
    --bubble-contact-text: #0f172a;
    --bubble-agent-bg: #0284c7;
    --bubble-agent-text: #ffffff;
    --bubble-ai-bg: #dcfce7;
    --bubble-ai-text: #166534;
    --bubble-internal-bg: #fef3c7;
    --bubble-internal-text: #78350f;
}

body {
    background-color: var(--bg-void);
    color: var(--text-primary);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}