/* ==============================================================
   LA AKADEMIA — Design System · CAPA 1: TOKENS
   ---------------------------------------------------------------
   - Un solo origen de verdad para color, sombra, radio, transición
     y espaciado, en ambos modos (claro y oscuro).
   - Modo oscuro enganchado al toggle nativo del sitio:
     html.thim-ekit-dark-mode (Thim Elementor Kit).
   - Se remapean también las variables legacy del tema Eduma y del
     kit (prefijo --thim-) para que TODO el CSS heredado del tema
     responda al cambio de modo sin reescribir el tema.
   - Cargada en wp_head(999): gana por orden de cascada, no por fuerza.
   ============================================================== */

/* ---------- TEMA CLARO (por defecto y con clase explícita) ---------- */
:root,
html.thim-ekit-light-mode {
	/* Color */
	--color-bg:            #ffffff;
	--color-bg-alt:        #f4f1ea;
	--color-surface:       #f8f4ee;
	--color-surface-2:     #efe8db;
	--color-text:          #1c2430;
	--color-text-muted:    #5b6472;
	--color-heading:       #111111;
	--color-accent:        #c9a24d;   /* dorado corporativo */
	--color-accent-hover:  #dfb96a;
	--color-accent-active: #8c6a2f;
	--color-on-accent:     #14100a;   /* texto sobre dorado: contraste AA (7.4:1) */
	--color-border:        #d8d2c4;
	--color-link:          #8c6a2f;
	--color-link-hover:    #c9a24d;

	/* Header */
	--color-header-surface:   #ffffff;  /* fondo único del header en claro */
	--color-header-text:      #1c2430;  /* texto del header en claro */
	--color-sticky-bg:        #ffffff;
	--color-sticky-text:      #333333;

	/* Elevación y forma */
	--shadow-1: 0 2px 8px rgba(13, 19, 29, 0.08);
	--shadow-2: 0 8px 24px rgba(13, 19, 29, 0.14);
	--radius-s: 8px;
	--radius-m: 16px;
	--radius-l: 50px;

	/* Movimiento */
	--transition-fast: 150ms ease;
	--transition-base: 300ms ease;
	--transition-slow: 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* Tipografía y espacio — 3 familias canónicas del sistema */
	--font-title: "Cinzel", "Urbanist", system-ui, sans-serif;      /* títulos */
	--font-serif: "Cormorant Garamond", Georgia, serif;             /* cuerpo editorial */
	--font-body:  "Inter", system-ui, sans-serif;                   /* UI/botones/datos */
	--font-size-base: 16px;
	--space-1: 4px;  --space-2: 8px;  --space-3: 16px;
	--space-4: 24px; --space-5: 32px; --space-6: 48px;

	/* Remapeo de variables LEGACY del tema Eduma (modo claro) */
	--bg-section-color: var(--color-surface);
	--thim-main-menu-text-color-rgb: 255, 255, 255;          /* reparación: el tema imprime "255,15," (roto) */
	--thim-sticky-main-menu-text-color-rgb: 51, 51, 51;      /* reparación: el tema imprime "51,3," (roto) */
}

/* ---------- NORMALIZACIÓN TIPOGRÁFICA (máx. 3 familias) ----------
   Sistema canónico: Cinzel (títulos/heading), Cormorant Garamond (cuerpo
   editorial), Inter (UI/botones/datos). Las 7 familias heredadas del demo
   se remapean aquí para que TODO el sitio renderice con solo 3 fuentes,
   sin reescribir los datos de Elementor. Aplica solo al frontend. */
body.demo-yoga,
body.demo-yoga .elementor-widget-heading .elementor-heading-title,
body.demo-yoga .thim-ekit-single-course__title,
body.demo-yoga h1, body.demo-yoga h2, body.demo-yoga h3,
body.demo-yoga h4, body.demo-yoga h5, body.demo-yoga h6 {
	/* Spectral / Alegreya Sans / Jost usadas como "segunda serif/sans" del demo → Inter */
	--e-global-typography-primary-font-family: var(--font-title);
	--e-global-typography-secondary-font-family: var(--font-title);
	--e-global-typography-text-font-family: var(--font-body);
	--e-global-typography-accent-font-family: var(--font-body);
}

/* Remapeo directo de cada familia heredada a la canónica equivalente.
   Los selectores por clase de widget garantis gana al font-family inline
   de Elementor por orden de carga (nuestra hoja va al final de <head>). */
body.demo-yoga .elementor-heading-title,
body.demo-yoga .elementor-widget-text-editor,
body.demo-yoga .elementor-widget-button .elementor-button,
body.demo-yoga .thim-ekits-menu__nav-link,
body.demo-yoga .lp-button,
body.demo-yoga button,
body.demo-yoga input,
body.demo-yoga select,
body.demo-yoga textarea {
	font-family: var(--font-body);
}

body.demo-yoga h1, body.demo-yoga h2, body.demo-yoga h3,
body.demo-yoga .elementor-widget-heading .elementor-heading-title,
body.demo-yoga .thim-ekit-single-course__title,
body.demo-yoga .thim-ekits-archive-course .course-title {
	font-family: var(--font-title); /* títulos: Cinzel */
}

body.demo-yoga .elementor-widget-text-editor,
body.demo-yoga .lp-course-description,
body.demo-yoga .course-tab-panel-descripcion p,
body.demo-yoga .thim-course-content p,
body.demo-yoga .thim-course-content li,
body.demo-yoga #learn-press-course-description p,
body.demo-yoga .ekits-content-course-tabs p,
body.demo-yoga .course-faqs-box__content p {
	font-family: var(--font-serif); /* cuerpo editorial: Cormorant Garamond */
}

/* Red de seguridad: resto de piezas de texto de widgets (icon-box, tabs,
   acordeones, breadcrumb, countdown, meta) quedan en la sans de UI. */
body.demo-yoga .elementor-icon-box-title,
body.demo-yoga .elementor-icon-box-description,
body.demo-yoga .elementor-tab-title,
body.demo-yoga .elementor-tab-content,
body.demo-yoga .elementor-accordion-title,
body.demo-yoga .thim-ekit-breadcrumb,
body.demo-yoga .countdown-period,
body.demo-yoga .thim-ekit-single-course__meta,
body.demo-yoga .course-faqs-box__title,
body.demo-yoga .thim-ekits-menu__dropdown a {
	font-family: var(--font-body);
}

/* ---------- TEMA OSCURO (estelar + dorado, mínimos de la auditoría) ---------- */
html.thim-ekit-dark-mode {
	/* Color */
	--color-bg:            #0b0f19;
	--color-bg-alt:        #0d1117;
	--color-surface:       #161e2e;
	--color-surface-2:     #1a2530;
	--color-text:          #e2e8f0;
	--color-text-muted:    #94a3b8;
	--color-heading:       #f8fafc;
	--color-accent:        #c9a24d;
	--color-accent-hover:  #dfb96a;
	--color-accent-active: #dfb96a;
	--color-on-accent:     #14100a;
	--color-border:        #334155;
	--color-link:          #dfb96a;
	--color-link-hover:    #f0cd7e;

	/* Header (fondo único por modo = sin corte visible) */
	--color-header-surface:   #0b0f19;  /* idéntico al fondo de página en oscuro */
	--color-header-text:      #e2e8f0;
	--color-sticky-bg:        #161e2e;
	--color-sticky-text:      #e2e8f0;

	/* Elevación */
	--shadow-1: 0 2px 8px rgba(0, 0, 0, 0.45);
	--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);

	/* Remapeo de variables LEGACY del tema Eduma y del kit (modo oscuro).
	   Esto es lo que hace que header sticky, submenús, móvil, breadcrumb,
	   footer de secciones, LearnPress y el ToC cambien de modo a la vez. */
	--bg-section-color: #161e2e;
	--thim-body-bg-color: #0b0f19;
	--thim-font-title-color: #f4f1ea;
	--thim-font-body-color: #cbd5e1;
	--thim-border-color: #334155;
	--thim-placeholder-color: #64748b;
	--thim-button-text-color: #14100a;      /* texto oscuro sobre dorado (AA) */
	--thim-button-hover-color: #dfb96a;     /* hover más claro: el texto oscuro sigue pasando AA */
	--thim-sticky-bg-main-menu-color: #161e2e;
	--thim-sticky-main-menu-text-color: #e2e8f0;
	--thim-sticky-main-menu-text-color-rgb: 226, 232, 240;
	--thim-sticky-main-menu-text-hover-color: #c9a24d;
	--thim-sub-menu-bg-color: #161e2e;
	--thim-sub-menu-border-color: #334155;
	--thim-sub-menu-text-color: #cbd5e1;
	--thim-sub-menu-text-color-hover: #c9a24d;
	--thim-bg-mobile-menu-color: #0d1117;
	--nav-mobile-color-background: #0d1117;
	--nav-mobile-color-text: #e2e8f0;
	--nav-mobile-color-hover: #c9a24d;
	--top-info-course-background_color: #161e2e;
	--top-info-course-text_color: #e2e8f0;
	--thim-copyright-border-color: #334155;
	--thim-preload-style-background: #0b0f19;
	--thim-preload-style-color: #c9a24d;
	/* LearnPress (el plugin imprime su marrón del demo #a36c45) */
	--lp-primary-color: #c9a24d;
	--lp-secondary-color: #e2e8f0;
	--lp-text-color: #e2e8f0;
	--lp-border-color: #334155;
	/* Header: el widget de menú de Thim define --menu-text-color FIJO en claro
	   (#0d1b2a navy) sobre el propio widget; sin esto, en oscuro las letras
	   del menú quedan navy-sobre-navy (invisibles). Se remapea aquí a nivel
	   html para que TODOS los menús (header 610, 12162, móvil) cambien a la vez. */
	--menu-text-color: #e2e8f0;
	--menu-text-color-hover: #dfb96a;
	--menu-icon-color: #e2e8f0;
}