/* ============================================================
   tokens.css · Theme Engine (NEP Academy Core)
   ------------------------------------------------------------
   Tokens estructurales y ranuras semanticas de color y tipografia.
   El Core NO conoce ninguna paleta: los valores de color y fuente
   de aqui son neutros y solo sirven para que una pagina sin
   vertical se vea legible. La vertical los sobrescribe en
   theme/palette.css, cargado DESPUES de este fichero.
   Contrato: docs/02_architecture/02_contrato_theme_niveles.md
   ============================================================ */
:root{
  /* --- Estructura (Core, no se sobrescribe) --- */
  --radio:22px;
  --radio-s:16px;
  --sombra:0 10px 30px var(--color-sombra);

  /* Tactil: minimo del producto para acciones primarias (>= WCAG 2.5.5) */
  --tap-min:64px;
  --tap-sec:48px;

  /* --- Ranuras semanticas (la vertical pone los valores) --- */
  --color-bg:#F7F7F5;            /* fondo de pagina */
  --color-bg-2:#E9E9E4;          /* fondo secundario, hover suave */
  --color-primary:#3A5A78;       /* color principal de marca */
  --color-primary-dark:#27405A;  /* enlaces, botones primarios */
  --color-primary-deep:#1B2E42;  /* pie de pagina */
  --color-secondary:#4F7A5A;     /* segundo color, etiquetas eyebrow */
  --color-secondary-soft:#E6F0E8;/* fondo de eyebrow */
  --color-accent:#E0B040;        /* acento calido, botones secundarios */
  --color-accent-dark:#B58A22;   /* sombra del acento */
  --color-warn:#D65A3A;          /* avisos, error suave */
  --color-tertiary:#334E9C;      /* tercer color (bloques institucionales) */
  --color-text:#1F2A30;
  --color-text-muted:#4A5A62;
  --color-white:#FFFFFF;
  --color-sombra:rgba(0,0,0,.12);

  /* Cabecera y pie (paso 5b) */
  --color-nav-bg:rgba(247,247,245,.92); /* fondo translucido de la cabecera fija */
  --bg-logo-icono:var(--color-bg-2);    /* fondo del icono del logo (admite degradado) */
  --color-footer-text:#D5DDE2;          /* texto y enlaces sobre --color-primary-deep */
  --color-footer-line:rgba(255,255,255,.15); /* separador del pie */

  /* Componentes (paso 5c) */
  --color-bg-3:#DCDCD5;                 /* hover sobre --color-bg-2 */
  --color-primary-shadow:#142435;       /* sombra solida bajo .btn-primary */
  --bg-hero:linear-gradient(180deg,var(--color-bg-2),var(--color-bg)); /* fondo del hero (admite degradado) */
  --color-hero-text:var(--color-text);  /* entradilla del hero */
  --color-secondary-text:#2F4A38;       /* texto sobre --color-secondary-soft */
  --color-text-soft:#4A5A62;            /* texto secundario dentro de tarjetas */
  --color-tag-bg:rgba(255,255,255,.22); /* etiqueta sobre tarjeta de color */
  --color-sombra-fuerte:rgba(0,0,0,.35);/* sombra del marco de juego */
  --color-feedback-ok:#8CE28C;          /* acierto en juegos, sobre fondo oscuro */
  --color-feedback-bad:#FF9E80;         /* fallo en juegos, sobre fondo oscuro */

  --f-display:system-ui,sans-serif;
  --f-texto:system-ui,sans-serif;
}

/* ============================================================
   palette.css · Vertical Financial Education
   ------------------------------------------------------------
   Paleta propia, pensada para 12-18 anos: sobria y creible a los 17,
   sin infantilismo. Azul profundo de confianza, verde de crecimiento
   y ambar como acento. Se carga DESPUES de core/theme-engine/tokens.css.

   Bloque 1: valores de la vertical en las ranuras semanticas del Core.
   Bloque 2: tokens propios (--v-*) de los componentes de la vertical.
   Esta vertical NO define alias de v1.1: eso es deuda de AI@Green.
   ============================================================ */
:root{
  /* --- 1. Ranuras semanticas --- */
  --color-bg:#F7F8FB;
  --color-bg-2:#E7EBF3;
  --color-bg-3:#D9DFEC;
  --color-primary:#1F4E79;
  --color-primary-dark:#16385A;
  --color-primary-deep:#0E2740;
  --color-primary-shadow:#0A1B2C;
  --color-secondary:#1F7A5A;
  --color-secondary-soft:#E2F1EA;
  --color-secondary-text:#14402F;
  --color-accent:#E9A522;
  --color-accent-dark:#B87F12;
  --color-warn:#D1495B;
  --color-tertiary:#4C3F8F;
  --color-text:#16202B;
  --color-text-muted:#46586B;
  --color-text-soft:#4A5A6B;
  --color-white:#FFFFFF;
  --color-sombra:rgba(22,56,90,.12);
  --color-sombra-fuerte:rgba(14,39,64,.35);
  --color-nav-bg:rgba(247,248,251,.92);
  --bg-logo-icono:linear-gradient(180deg,#E9A522 0 55%,#1F4E79 55% 100%);
  --bg-hero:linear-gradient(180deg,#DCE6F3 0%,#BFD0E6 55%,#9FB8D8 100%);
  --color-hero-text:#16354F;
  --color-footer-text:#C7D6E6;

  --f-display:'Outfit',system-ui,sans-serif;
  --f-texto:'Inter',system-ui,sans-serif;

  /* --- 2. Tokens propios de la vertical --- */
  --v-eso:#2E86AB;          /* segmento ESO */
  --v-eso-claro:#5FB0CE;
  --v-bach:#4C3F8F;         /* segmento Bachillerato */
  --v-bach-claro:#7E6FC4;
  --v-ok:#1F7A5A;           /* decision acertada en los juegos */
  --v-alerta:#D1495B;       /* fraude, deuda, riesgo */
  --v-dinero:#E9A522;       /* cifras y dinero */
  --v-tarjeta-linea:#D4DCE8;
}

/* ============================================================
   palette.css · Instancia demo de NEP
   ------------------------------------------------------------
   La instancia demo NO repinta la vertical: ese es justo el
   mensaje de la demostracion, que se ve la vertical tal cual.
   Solo define los tokens --i-* que necesita su propia marca
   (franja de demostracion del pie). Se carga DESPUES de
   verticals/financial-education/theme/palette.css.
   ============================================================ */
:root{
  --i-demo-linea:#3E6D97;   /* filete de la franja "instancia de demostracion" */
  --i-demo-texto:#5A7690;   /* texto de esa franja */
}