/* ========================================
   Nombre:      variables.css
   Descripcion: CSS custom properties del placement — paleta Anglia (aeor) sobre la estructura de golotes, tema claro y oscuro
   Version:     0.3.0
   Creado:      18-09-2026
   Modificado:  27-09-2026
   Autor:       Sebastian Toyos
   ======================================== */

/* ========================================
   1. Paleta Light (default) — igual a las variables de placement.pen
   ======================================== */
:root,
[data-theme="light"] {
    /* Fondos */
    --bg-page: #F5F5F5;
    --bg-nav: #FFFFFF;
    --bg-surface: #EBEBEB;
    --bg-card: #FFFFFF;
    --bg-subtle: #FAFAFA;

    /* Bordes */
    --border: #E0E0E0;

    /* Texto — muted en #737373 para cumplir AA (4.7:1); golotes usa #888 */
    --text-primary: #1A1A1A;
    --text-secondary: #555555;
    --text-muted: #737373;

    /* Acento Anglia */
    --accent: #0C78AB;
    --accent-hover: #0A6690;
    --accent-text: #0A6690;
    --accent-bg: rgba(12, 120, 171, 0.10);
    --accent-bg-strong: rgba(12, 120, 171, 0.20);
    --accent-soft: #DCEDF5;
    --accent-soft-hover: #C9E3F0;
    --on-accent: #FFFFFF;

    /* Marca */
    --brand-indigo: #39448C;
    --brand-teal: #007E9E;
    --on-brand: #FFFFFF;

    /* Estados semanticos. Los warnings van en el ambar de MDB, como en el .pen: nunca en rojo */
    --ok: #15663F;
    --ok-bg: rgba(46, 168, 122, 0.10);
    --warn: #896110;
    --warn-bg: #FBF1DD;
    --error: #C62828;
    --error-bg: #FFEBEE;
    --info: #1565C0;
    --info-bg: rgba(25, 118, 210, 0.10);

    /* Sombras */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.20);

    /* Radios */
    --radius-input: 4px;
    --radius-btn: 8px;
    --radius-item: 10px;
    --radius-card: 12px;
    --radius-modal: 16px;
    --radius-pill: 50px;

    /* Medidas del shell */
    --nav-rail-width: 64px;
    --topbar-height: 56px;
    --submenu-width: 220px;

    /* Tipografia */
    --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Transicion de tema */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

    /* Capas */
    --z-nav: 100;
    --z-topbar: 100;
    --z-modal: 300;
    --z-toast: 400;
    --z-theme-overlay: 9999;
}

/* ========================================
   2. Paleta Dark
   ======================================== */
[data-theme="dark"] {
    --bg-page: #1E1E1E;
    --bg-nav: #272727;
    --bg-surface: #343434;
    --bg-card: #272727;
    --bg-subtle: #2E2E2E;

    --border: #3D3D3D;

    --text-primary: #F5F5F5;
    --text-secondary: #C4C4C4;
    --text-muted: #B0B0B0;

    /* Acento aclarado para contraste sobre fondo oscuro; el texto sobre el acento pasa a oscuro */
    --accent: #4FB0E3;
    --accent-hover: #6BC0EA;
    --accent-text: #6BC0EA;
    --accent-bg: rgba(79, 176, 227, 0.12);
    --accent-bg-strong: rgba(79, 176, 227, 0.22);
    --accent-soft: #12303F;
    --accent-soft-hover: #1A4357;
    --on-accent: #0B1F2A;

    --brand-teal: #3FB3CF;

    --ok: #6FD3B2;
    --ok-bg: rgba(67, 190, 155, 0.12);
    --warn: #EFC776;
    --warn-bg: #2E2005;
    --error: #EF5350;
    --error-bg: #3A1B1B;
    --info: #42A5F5;
    --info-bg: rgba(66, 165, 245, 0.15);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.45);

    /* El texto secundario del tema: MDB pasa a oscuro con data-mdb-theme pero con su propio gris, y Bootstrap queda en
       claro (no hay data-bs-theme) */
    --mdb-secondary-color: var(--text-secondary);
    --bs-secondary-color: var(--text-secondary);
}