/*
Theme Name: Mi Rincón Mágico
Theme URI: https://escuelamirinconmagico.cl
Description: Tema hijo para la Escuela de Párvulos Mi Rincón Mágico (Puente Alto, Chile). Matrícula 2027.
Author: CreaFlow / PST
Author URI: https://escuelamirinconmagico.cl
Template: generatepress
Version: 1.1.0
Text Domain: mi-rincon-magico
*/

/* ==========================================================================
   TOKENS DE DISEÑO DE MARCA - ESCUELA MI RINCÓN MÁGICO
   ========================================================================== */
:root {
  /* Paleta de Colores de Marca (Rediseño 2027) */
  --mrm-rojo: #D81F26;
  --mrm-rojo-oscuro: #A9141A;
  --mrm-rojo-vivo: #FC0F2C;
  --mrm-amarillo: #FDCB0A;
  --mrm-turquesa: #03ACBC;
  --mrm-turquesa-oscuro: #0E7C8A;
  --mrm-verde: #62B52F;
  --mrm-naranjo: #C2410C;
  --mrm-tinta: #1E2225;
  --mrm-texto-suave: #4A4F55;
  --mrm-crema: #FBF6EA;
  --mrm-papel: #FFFDF7;
  --mrm-borde-punteado: #F3D88A;

  /* Fuentes de Marca */
  --mrm-font-display: 'Baloo 2', cursive, sans-serif;
  --mrm-font-body: 'Nunito Sans', sans-serif;
  --mrm-font-mano: 'Caveat Brush', cursive;

  /* Mapeo para compatibilidad previa */
  --color-primario: var(--mrm-rojo);
  --color-amarillo: var(--mrm-amarillo);
  --color-naranjo: var(--mrm-naranjo);
  --color-turquesa: var(--mrm-turquesa);
  --color-crema: var(--mrm-crema);
  --color-texto: var(--mrm-tinta);
  --color-texto-suave: var(--mrm-texto-suave);
  --color-footer: var(--mrm-tinta);
  --color-whatsapp: #35B56A;

  --font-titulos: var(--mrm-font-display);
  --font-cuerpo: var(--mrm-font-body);
  --font-acento: var(--mrm-font-mano);

  /* Variables de Diseño y Layout */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   ESTILOS BASE DE RESET Y TIPOGRAFÍA
   ========================================================================== */
body {
  font-family: var(--font-cuerpo);
  color: var(--color-texto);
  background-color: #ffffff;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titulos);
  color: var(--color-texto);
  line-height: 1.15;
  margin-top: 0;
}

.font-accent {
  font-family: var(--font-acento);
  font-weight: 400;
}

/* Clases de Utilidad para Colores de Marca */
.bg-primario { background-color: var(--color-primario); }
.bg-amarillo { background-color: var(--color-amarillo); }
.bg-naranjo  { background-color: var(--color-naranjo); }
.bg-turquesa { background-color: var(--color-turquesa); }
.bg-crema    { background-color: var(--color-crema); }
.bg-footer   { background-color: var(--color-footer); }
.bg-whatsapp { background-color: var(--color-whatsapp); }

.text-primario { color: var(--color-primario); }
.text-amarillo { color: var(--color-amarillo); }
.text-naranjo  { color: var(--color-naranjo); }
.text-turquesa { color: var(--color-turquesa); }
.text-suave    { color: var(--color-texto-suave); }