/**
 * Tokens de diseño — fuente única de :root para todo el plugin.
 *
 * Valores tomados de design_handoff_editor_2026/README.md ("Tokens de
 * diseño") y verificados contra los valores computados en vivo dentro de
 * Editor 2026.dc.html (objeto `T` / `bgs` del prototipo) — ambas fuentes
 * coinciden. Definitivos según el propio handoff: no son un punto de
 * partida a ajustar a ojo.
 *
 * Debe cargar ANTES que cualquier otra hoja del plugin que use estas
 * variables (wp_enqueue_style con dependencia explícita en
 * class-wccd-core.php).
 */

@font-face {
	font-family: 'Poppins';
	src: url('../../fonts/poppins/poppins-latin-300-normal.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../../fonts/poppins/poppins-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../../fonts/poppins/poppins-latin-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../../fonts/poppins/poppins-latin-600-normal.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../../fonts/poppins/poppins-latin-700-normal.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'DM Mono';
	src: url('../../fonts/dm-mono/dm-mono-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'DM Mono';
	src: url('../../fonts/dm-mono/dm-mono-latin-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
/* Playfair Display: única opción de fuente serif ofrecida al cliente para
   el texto de su diseño (no se usa en la interfaz del editor en sí). */
@font-face {
	font-family: 'Playfair Display';
	src: url('../../fonts/playfair-display/playfair-display-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Playfair Display';
	src: url('../../fonts/playfair-display/playfair-display-latin-600-normal.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ---- Color: acción y selección ---- */
	--wccd-menta:          #12CEBD; /* acción principal: comprar, aplicar, guardar, toggles activos, estado OK */
	--wccd-menta-ink:      #04322D; /* texto encima de fondos menta */
	--wccd-menta-dark:     #12A99B; /* texto "guardado", "resolución suficiente" */
	--wccd-violeta:        #6B4BC0; /* elemento/capa/herramienta seleccionada, foco */
	--wccd-violeta-soft:   #F1ECFB; /* fondo de herramienta activa, botón de fuente activo */
	--wccd-violeta-layer:  #F5F1FC; /* fondo de fila de capa seleccionada */
	--wccd-violeta-layer-line: #D8CDF3; /* borde de fila de capa seleccionada */
	--wccd-rosa:           #F3D9E9; /* muestras y plantillas */
	--wccd-rosa-totales:   #F7F0F6; /* bloque de totales (pantalla de revisión) */

	/* ---- Color: texto y neutros ---- */
	--wccd-ink:            #1A1830; /* texto principal, botones oscuros, sidebar admin, cuerpo del case */
	--wccd-ink-soft:       #5B5473; /* texto de apoyo */
	/* Oscurecido de #8A83A3 → #6B6588 (auditoría /impeccable critique, P1):
	   #8A83A3 sobre blanco daba ~3.6:1, por debajo del 4.5:1 que exige WCAG
	   AA para texto — y es el color de CADA etiqueta mono del sistema
	   (medidas, metadatos, capas, calidad de impresión), así que el fallo
	   era sistémico, no un caso aislado. #6B6588 da ~5.5:1 sobre blanco/
	   panel/campo (los fondos reales donde vive este token), con margen de
	   sobra, y se mantiene distinto de --wccd-ink-soft (#5B5473, ~7.1:1) —
	   no se reusa ese valor tal cual para no perder el escalón propio de
	   este token dentro de la familia de grises. Sobre fondos de color
	   (p. ej. el degradado rosa de .wccd-review__thumb--hand) este valor
	   YA NO alcanza igual el 4.5:1 — ver el override puntual a
	   --wccd-ink-soft en review.css para ese caso específico, en vez de
	   oscurecer este token global al punto de duplicar --wccd-ink-soft. */
	--wccd-label:          #6B6588; /* etiquetas mono, metadatos */
	--wccd-line:           #E7E2F0; /* bordes */
	--wccd-line-soft:      #EFEBF6; /* divisiones */
	--wccd-row:            #F2EFF8; /* filas */

	/* ---- Color: fondos ---- */
	--wccd-app-bg:         #F4F1F8; /* fondo de la app/modal */
	--wccd-canvas-bg:      #F7F5FB; /* fondo detrás del lienzo */
	--wccd-panel:          #FFFFFF; /* panel/tarjeta */
	--wccd-field:          #FBFAFE; /* campos de formulario */
	--wccd-rail-bg:        #FCFBFE; /* riel de herramientas */

	/* ---- Color: semántico ---- */
	--wccd-danger:         #C2456B; /* "Eliminar" */
	--wccd-warn-bg:        #FBEBD6;
	--wccd-warn-ink:       #8A5A20;
	--wccd-ok-bg:          #D6F5F1;
	--wccd-ok-ink:         #0C6E64;
	--wccd-info-bg:        #EDE6FA;
	--wccd-info-ink:       #4B3A82;

	/* ---- Paleta ofrecida al cliente (texto y relleno) ---- */
	--wccd-swatch-1: #FFFFFF;
	--wccd-swatch-2: #1A1830;
	--wccd-swatch-3: #6B4BC0;
	--wccd-swatch-4: #12CEBD;
	--wccd-swatch-5: #F3D9E9;
	--wccd-swatch-6: #F6C9A8;
	--wccd-swatch-7: #9AA0AE;

	/* ---- Fondos de plantilla (degradados/texturas con nombre) ---- */
	--wccd-bg-rosa:    linear-gradient(160deg, #F6DDEC 0%, #EFCFE2 100%);
	--wccd-bg-violeta: linear-gradient(165deg, #8E6BE0 0%, #5B37B5 100%);
	--wccd-bg-tinta:   #1A1830;
	--wccd-bg-menta:   linear-gradient(160deg, #9FF0E8 0%, #12CEBD 100%);
	--wccd-bg-crema:   #EFE7DC;
	--wccd-bg-rayas:   repeating-linear-gradient(45deg, #F0D9C6 0 14px, #E7CBB4 14px 28px);
	--wccd-bg-aurora:  linear-gradient(160deg, #A98BF0 0%, #6B4BC0 55%, #3D2578 100%);
	--wccd-bg-duo:     linear-gradient(135deg, #1A1830 0% 50%, #6B4BC0 50% 100%);

	/* ---- Tipografía ---- */
	--wccd-font-ui:     'Poppins', Helvetica, Arial, sans-serif;
	--wccd-font-mono:   'DM Mono', ui-monospace, monospace;
	/* De acá para abajo: opciones de fuente para el TEXTO DEL CLIENTE (panel
	   "Texto" del editor, ver panels/panel-text.js) — nunca la UI del propio
	   editor, que se queda en --wccd-font-ui. Caveat/Bebas Neue/Quicksand/
	   Pacifico se sirven desde Google Fonts (wccd_enqueue_google_fonts() en
	   includes/wccd-functions.php), no auto-hospedadas como las de acá
	   arriba — decisión explícita para no tener que sumar un .woff2 al repo
	   cada vez que se agrega una tipografía nueva. */
	--wccd-font-serif:   'Playfair Display', serif;
	--wccd-font-script:  'Caveat', cursive;
	--wccd-font-display: 'Bebas Neue', sans-serif;
	--wccd-font-rounded: 'Quicksand', sans-serif;
	--wccd-font-casual:  'Pacifico', cursive;

	--wccd-fs-screen-title: 30px;
	--wccd-fs-section-title: 24px;
	--wccd-fs-panel-title: 17px;
	--wccd-fs-panel-title-sm: 16px;
	--wccd-fs-btn-primary: 15px;
	--wccd-fs-control: 14px;
	--wccd-fs-secondary: 13px;
	--wccd-fs-secondary-sm: 12.5px;
	--wccd-fs-mono-lg: 11px;
	--wccd-fs-mono-sm: 10px;

	/* Etiquetas mono de campo: siempre mayúsculas + tracking .16em */
	--wccd-label-letter-spacing: .16em;

	/* ---- Espaciado ---- */
	--wccd-space-1: 4px;
	--wccd-space-2: 6px;
	--wccd-space-3: 8px;
	--wccd-space-4: 10px;
	--wccd-space-5: 14px;
	--wccd-space-6: 18px;
	--wccd-space-7: 22px;
	--wccd-space-8: 24px;
	--wccd-space-9: 34px;

	/* ---- Radios ---- */
	--wccd-radius-control: 9px;   /* 8/9/10 controles */
	--wccd-radius-row: 11px;      /* 11/12 filas y botones grandes */
	--wccd-radius-card: 15px;     /* 14/16 tarjetas */
	--wccd-radius-shell: 20px;
	--wccd-radius-pill: 999px;    /* chips y píldoras */
	--wccd-radius-case-outer: 44px;
	--wccd-radius-case-inner: 38px;

	/* ---- Sombras ---- */
	--wccd-shadow-shell:    0 24px 60px -30px rgba(26, 24, 48, .28);
	--wccd-shadow-float:    0 8px 22px -14px rgba(26, 24, 48, .4);
	--wccd-shadow-popover:  0 18px 40px -18px rgba(26, 24, 48, .42);
	--wccd-shadow-sheet:    0 -18px 40px -26px rgba(26, 24, 48, .5);
	--wccd-shadow-case:     0 30px 60px -26px rgba(26, 24, 48, .5);

	/* ---- Táctil ---- */
	--wccd-tap-min: 44px;
}