/* =========================================================
   Archivo: assets/css/00-design-system.css
   Proyecto: INEM Kennedy Child Theme

   Función:
   - Definir estilos base del sistema visual institucional.
   - Aplicar superficies reutilizables.
   - Establecer fondo general del sitio.
   - No declarar variables globales aquí.

   Nota:
   - La fuente única de variables es:
     assets/css/02-variables.css
========================================================= */


/* =========================================================
   1. Fondo general del sitio
========================================================= */

body {
    background: var(--inem-page-bg);
}

body.home,
.inem-home {
    background: var(--inem-page-bg);
}


/* =========================================================
   2. Superficies reutilizables
========================================================= */

.inem-surface {
    background: var(--inem-surface);
    border: 1px solid var(--inem-border-soft);
    border-radius: var(--inem-radius-lg);
    box-shadow: var(--inem-shadow-soft);
}

.inem-rounded-panel {
    border-radius: var(--inem-radius-xl);
    box-shadow: var(--inem-shadow-soft);
}


/* =========================================================
   3. Variantes de superficies
========================================================= */

.inem-surface--soft {
    background: var(--inem-gray-50);
    border: 1px solid var(--inem-border-soft);
}

.inem-surface--bordered {
    border: 1px solid var(--inem-border);
    box-shadow: none;
}

.inem-surface--elevated {
    box-shadow: var(--inem-shadow-medium);
}


/* =========================================================
   4. Accesibilidad base
========================================================= */

:focus-visible {
    outline: 3px solid var(--inem-accent);
    outline-offset: 3px;
}

::selection {
    background: var(--inem-accent);
    color: var(--inem-primary-dark);
}
/* =====================================================
   SISTEMA DE ICONOS SVG (LUCIDE LOCAL)
===================================================== */

.inem-icon {
	display: block;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}