/*
 * TEMA VISUAL — Sistema de Campamentos Transitorios
 * Archivo: frontend/shared/temas/tema.css
 *
 * Cómo cambiar el color / tipografía rápido:
 *   1. Color principal → edita --color-primary (y --color-primary-rgb).
 *      Ajusta hover/light/dark si el contraste no queda bien.
 *   2. Tipografía → edita --font-family (y el @import de Google Fonts arriba).
 *   3. Incluye este archivo ANTES de styles.css en cada HTML.
 *   No hace falta tocar styles.css para un cambio de marca.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
    /* —— Brand (punto de cambio rápido) —— */
    --color-primary: #009BDB;
    --color-primary-hover: #007ab0;
    --color-primary-dark: #0088c2;
    --color-primary-light: #33b4e8;
    --color-primary-mid: #80d0f0;
    --color-primary-pale: #b3e3f7;
    --color-primary-tint: #eff6ff;
    --color-primary-tint-soft: #f0f9ff;
    --color-primary-tint-sky: #e0f2fe;
    --color-primary-tint-soft2: #e8f4fd;
    --color-primary-border: #bae6fd;
    --color-on-primary: #ffffff;
    --color-primary-rgb: 0, 155, 219;

    /* Aliases ES / legacy (styles.css, datepicker) */
    --color-primario: var(--color-primary);
    --color-primario-hover: var(--color-primary-hover);
    --color-primario-dark: var(--color-primary-dark);
    --color-primario-light: var(--color-primary-light);
    --color-primario-mid: var(--color-primary-mid);
    --color-primario-pale: var(--color-primary-pale);
    --color-primario-tint: var(--color-primary-tint);
    --color-primario-tint-soft: var(--color-primary-tint-soft);
    --color-sobre-primario: var(--color-on-primary);
    --color-primario-rgb: var(--color-primary-rgb);
    --brand-blue: var(--color-primary);

    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --primary-light: var(--color-primary-light);
    --primary-accent: var(--color-primary);
    --primary-hover: var(--color-primary-hover);
    --primary-tint: var(--color-primary-tint);
    --primary-mid: var(--color-primary-mid);
    --primary-pale: var(--color-primary-pale);

    /* Sidebar (variantes del brand) */
    --sidebar-bg: var(--color-primary);
    --sidebar-active: var(--color-primary-dark);

    /* Semánticos */
    --secondary: #64748b;
    --success: #059669;
    --success-bg: #ecfdf5;
    --success-text: #065f46;
    --warning: #d97706;
    --warning-bg: #fffbeb;
    --warning-text: #92400e;
    --danger: #dc2626;
    --danger-bright: #ef4444;
    --danger-bg: #fef2f2;
    --danger-text: #991b1b;
    --info: var(--color-primary);
    --info-bg: #ecfeff;
    --info-text: #155e75;

    /* Neutros / superficie / texto */
    --dark: #0f172a;
    --dark-light: #1e293b;
    --light: #f8fafc;
    --light-border: #e2e8f0;
    --border-muted: #cbd5e1;
    --text-muted: #94a3b8;
    --text-secondary: var(--secondary);
    --surface-muted: #f1f5f9;
    --surface-muted-text: #475569;
    --white: #ffffff;

    /* Tipografía */
    --font-family: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--font-family);
}