/**
 * Design tokens — The Lopez Collective (copia de respaldo)
 * -----------------------------------------------------------------------
 * Copia idéntica a theme/lopez-collective/assets/css/tokens.css. El
 * plugin solo la usa como fallback si el tema "Lopez Collective" no está
 * activo (ver lcb_get_tokens_style_handle() en el loader del plugin);
 * cuando el tema sí está activo, sus tokens tienen prioridad. Mantén
 * ambos archivos sincronizados manualmente.
 *
 * Paleta: brand kit oficial (bosque + rosa palo). Tipografía:
 * equivalentes libres de Google Fonts a Cardo/Benedict/Canva Sans/Fabrica
 * — ver el header completo en la copia del tema para el detalle.
 *
 * Lineamiento rosa: más blanco/verde; #f7bac1 solo como pop (outline SVG,
 * hover de botón). Fondos = mist/soft, nunca blush sólido.
 */

:root {
	/* -----------------------------------------------------------------
	   1) Paleta cruda — brand kit oficial de The Lopez Collective
	----------------------------------------------------------------- */
	--lc-color-forest: #10372c;   /* verde bosque — color principal de marca */
	--lc-color-blush: #f7bac1;    /* rosa palo — POP de acento (no fondos) */
	--lc-color-ink: #000000;      /* negro — texto */
	--lc-color-paper: #ffffff;    /* blanco */

	/* Variaciones derivadas de la paleta oficial (hover, fondos suaves) */
	--lc-color-forest-dark: #0a2019;
	--lc-color-forest-soft: rgb(16 55 44 / 8%);
	--lc-color-blush-dark: #f0949e;
	/* Tinte usable para fondos de sección (hero, header, warm) */
	--lc-color-blush-soft: #fdf0f1;
	--lc-color-ink-soft: rgb(0 0 0 / 68%);

	/* -----------------------------------------------------------------
	   2) Roles semánticos — úsalos en vez de los colores crudos
	----------------------------------------------------------------- */
	--lc-color-bg: var(--lc-color-paper);
	/* Rosa usable al 30%: se ve apenas; no invade como #fdf0f1 sólido */
	--lc-color-bg-warm: rgb(253 240 241 / 0.2);
	--lc-color-bg-soft: var(--lc-color-paper);        /* cards: blanco */
	--lc-color-bg-alt: rgb(253 240 241 / 0.2);        /* NUNCA #f7bac1 sólido */
	--lc-color-bg-white: var(--lc-color-paper);
	--lc-color-bg-dark: var(--lc-color-forest);

	--lc-color-text: var(--lc-color-ink);
	--lc-color-text-muted: var(--lc-color-ink-soft);
	--lc-color-text-on-dark: var(--lc-color-paper);
	--lc-color-text-on-dark-muted: rgb(255 255 255 / 72%);

	--lc-color-primary: var(--lc-color-forest);
	--lc-color-primary-hover: var(--lc-color-forest-dark);

	/* Rosa fuerte: outlines SVG, hovers de botón, acentos lineales — no fills de sección */
	--lc-color-accent: var(--lc-color-blush);
	--lc-color-accent-hover: var(--lc-color-blush-dark);
	--lc-color-accent-ink: var(--lc-color-forest); /* texto/iconos sobre tintes rosa claros */

	--lc-color-border: rgb(0 0 0 / 10%);
	--lc-color-border-on-dark: rgb(255 255 255 / 16%);

	/* -----------------------------------------------------------------
	   3) Tipografía — ver nota de equivalencias arriba
	----------------------------------------------------------------- */
	--lc-font-heading: "Cardo", "Iowan Old Style", "Georgia", serif;
	--lc-font-script: "Mrs Saint Delafield", "Segoe Script", cursive;
	--lc-font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--lc-font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--lc-font-size-eyebrow: 0.8125rem;
	--lc-font-size-sm: 0.9375rem;
	--lc-font-size-base: 1rem;
	--lc-font-size-lg: 1.25rem;
	--lc-font-size-xl: clamp(1.75rem, 2.4vw, 2.25rem);
	--lc-font-size-2xl: clamp(2.25rem, 4vw, 3.25rem);
	--lc-font-size-3xl: clamp(2.75rem, 6vw, 4.5rem);
	--lc-font-size-script: clamp(2rem, 4vw, 3rem);

	--lc-letter-spacing-eyebrow: 0.14em;
	--lc-letter-spacing-heading: 0.005em;
	--lc-line-height-heading: 1.15;
	--lc-line-height-body: 1.65;

	/* -----------------------------------------------------------------
	   4) Espaciado — escala consistente entre secciones/bloques
	----------------------------------------------------------------- */
	--lc-space-3xs: 4px;
	--lc-space-2xs: 8px;
	--lc-space-xs: 16px;
	--lc-space-sm: 24px;
	--lc-space-md: 40px;
	--lc-space-lg: 64px;
	--lc-space-xl: 104px;

	--lc-container-padding: clamp(20px, 5vw, 56px);
	--lc-container-max: 1280px;

	/* -----------------------------------------------------------------
	   5) Bordes, sombras, transiciones
	----------------------------------------------------------------- */
	--lc-radius-sm: 8px;
	--lc-radius-md: 20px;
	--lc-radius-lg: 32px;
	--lc-radius-pill: 999px;
	--lc-transition: 220ms ease;
	--lc-shadow-soft: 0 20px 48px rgb(16 55 44 / 12%);
	--lc-shadow-dark: 0 24px 48px rgb(0 0 0 / 30%);
}