/* variables.css - Variables globales y temas */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --bg-app: #18181b; /* Zinc 900 / Grafito Mineral */
    --bg-card: rgba(39, 39, 42, 0.65); /* Zinc 800 transparent */
    --bg-input: #27272a; /* Zinc 800 solid */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-focus: #c25e43; /* Cobre Suave / Terracota Mineral */
    
    --text-main: #f4f4f5; /* Zinc 50 */
    --text-muted: #a1a1aa; /* Zinc 400 */

    /* Barra lateral e superficies sutís (hover, badges neutros) */
    --bg-sidebar: rgba(24, 24, 27, 0.85);
    --bg-sidebar-mobile: rgba(24, 24, 27, 0.95);
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-subtle: rgba(255, 255, 255, 0.08);

    --primary: #c25e43; /* Cobre Suave */
    --primary-hover: #a64c33;
    --accent: #d47d63; /* Terracota Clara */
    
    --success: #10b981;
    --success-bg: rgba(16, 185, 129, 0.15);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.15);
    
    --shadow-main: 0 10px 30px -10px rgba(0, 0, 0, 0.65);
    --font-app: 'Outfit', sans-serif;
    --radius-main: 16px;
    --radius-sm: 8px;
}

/* Alias usados en estilos inline de index.php / app.js. Decláranse en body (non en :root)
   para que var(--text-main) se resolva co valor do tema activo (body.light-theme) */
body {
    --text-color: var(--text-main);
    --danger-color: var(--danger);
}

/* Light Mode Toggle */
body.light-theme {
    --bg-app: #f4f4f5; /* Zinc 100 / Light Graphite */
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-input: #ffffff;
    --border-color: rgba(0, 0, 0, 0.08);
    --border-focus: #c25e43;
    
    --text-main: #18181b;
    --text-muted: #71717a; /* Zinc 600 */

    --bg-sidebar: rgba(255, 255, 255, 0.85);
    --bg-sidebar-mobile: rgba(255, 255, 255, 0.97);
    --bg-hover: rgba(0, 0, 0, 0.04);
    --bg-subtle: rgba(0, 0, 0, 0.06);

    --primary: #c25e43;
    --primary-hover: #a64c33;
    
    --success-bg: rgba(16, 185, 129, 0.1);
    --warning-bg: rgba(245, 158, 11, 0.1);
    --danger-bg: rgba(239, 68, 68, 0.1);
    
    --shadow-main: 0 10px 25px -10px rgba(24, 24, 27, 0.1);
}