/**
 * Sistema de 4 presets visuales de marca. Cada widget que llama a
 * WidgetBase::register_visual_preset_control() obtiene una clase
 * '.ccpw-preset-{familia}' en su wrapper (via prefix_class). Esta hoja
 * SOLO define los TOKENS (custom properties) de cada familia; el CSS de
 * cada widget decide, según su propia estructura, qué tokens usar y
 * dónde (no todos los widgets consumen todos los tokens).
 *
 * Por diseño, cuando 'visual_preset' está vacío (valor por defecto) no se
 * añade ninguna clase: el widget se comporta exactamente como antes de
 * que existieran los presets (cero cambio de comportamiento salvo que el
 * usuario elija uno explícitamente).
 */

/* 1. Editorial dorado — el acabado editorial de base del sitio: marfil
      cálido, dorado sobrio, serif itálica en títulos, generoso. */
.ccpw-preset-editorial-dorado {
	--ccpw-preset-bg: var(--ccpw-ivory);
	--ccpw-preset-fg: var(--ccpw-ink);
	--ccpw-preset-fg-muted: var(--ccpw-warm-gray);
	--ccpw-preset-accent: var(--ccpw-gold);
	--ccpw-preset-accent-contrast: var(--ccpw-white-warm);
	--ccpw-preset-border: var(--ccpw-border);
	--ccpw-preset-radius: var(--ccpw-radius-md);
	--ccpw-preset-shadow: var(--ccpw-shadow-soft);
	--ccpw-preset-title-font: var(--ccpw-font-serif);
	--ccpw-preset-title-style: italic;
	--ccpw-preset-title-weight: 500;
	--ccpw-preset-space-sm: 12px;
	--ccpw-preset-space-md: 28px;
	--ccpw-preset-space-lg: 56px;
	--ccpw-preset-icon-bg: transparent;
	--ccpw-preset-icon-fg: var(--ccpw-gold);
	--ccpw-preset-icon-border: 1px solid var(--ccpw-gold);
	--ccpw-preset-icon-radius: 50%;
	--ccpw-preset-eyebrow-color: var(--ccpw-gold);
	--ccpw-preset-eyebrow-tracking: 0.14em;
	--ccpw-preset-divider-weight: 1px;
}

/* 2. Alto contraste carbón — dramático y oscuro, para momentos de
      autoridad (héroes, CTAs fuertes). Serif recta (no itálica), acentos
      dorados más luminosos, sombras profundas, densidad ligeramente
      mayor. */
.ccpw-preset-alto-contraste-carbon {
	--ccpw-preset-bg: var(--ccpw-ink);
	--ccpw-preset-fg: var(--ccpw-white-warm);
	--ccpw-preset-fg-muted: rgba(255, 253, 249, 0.68);
	--ccpw-preset-accent: var(--ccpw-gold-light);
	--ccpw-preset-accent-contrast: var(--ccpw-ink);
	--ccpw-preset-border: rgba(255, 255, 255, 0.16);
	--ccpw-preset-radius: var(--ccpw-radius-sm);
	--ccpw-preset-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
	--ccpw-preset-title-font: var(--ccpw-font-serif);
	--ccpw-preset-title-style: normal;
	--ccpw-preset-title-weight: 600;
	--ccpw-preset-space-sm: 10px;
	--ccpw-preset-space-md: 22px;
	--ccpw-preset-space-lg: 44px;
	--ccpw-preset-icon-bg: var(--ccpw-gold-light);
	--ccpw-preset-icon-fg: var(--ccpw-ink);
	--ccpw-preset-icon-border: none;
	--ccpw-preset-icon-radius: 50%;
	--ccpw-preset-eyebrow-color: var(--ccpw-gold-light);
	--ccpw-preset-eyebrow-tracking: 0.16em;
	--ccpw-preset-divider-weight: 2px;
}

/* 3. Marfil cálido — suave y cercano, para testimonios, equipo y
      momentos de conversión menos formales. Sin itálica, esquinas
      amplias, sombras difusas, más aire. */
.ccpw-preset-marfil-calido {
	--ccpw-preset-bg: var(--ccpw-ivory-light);
	--ccpw-preset-fg: var(--ccpw-charcoal);
	--ccpw-preset-fg-muted: var(--ccpw-warm-gray);
	--ccpw-preset-accent: var(--ccpw-gold-light);
	--ccpw-preset-accent-contrast: var(--ccpw-ink);
	--ccpw-preset-border: rgba(117, 94, 66, 0.14);
	--ccpw-preset-radius: var(--ccpw-radius-lg);
	--ccpw-preset-shadow: var(--ccpw-shadow-soft);
	--ccpw-preset-title-font: var(--ccpw-font-serif);
	--ccpw-preset-title-style: normal;
	--ccpw-preset-title-weight: 500;
	--ccpw-preset-space-sm: 14px;
	--ccpw-preset-space-md: 32px;
	--ccpw-preset-space-lg: 64px;
	--ccpw-preset-icon-bg: rgba(208, 174, 106, 0.16);
	--ccpw-preset-icon-fg: var(--ccpw-gold-light);
	--ccpw-preset-icon-border: none;
	--ccpw-preset-icon-radius: 12px;
	--ccpw-preset-eyebrow-color: var(--ccpw-warm-gray);
	--ccpw-preset-eyebrow-tracking: 0.1em;
	--ccpw-preset-divider-weight: 1px;
}

/* 4. Minimal sobrio — restringido y moderno, para contenido denso o
      utilitario (FAQ, líneas de tiempo, avisos legales, recursos). Sin
      dorado como acento (monocromo + dorado SOLO en foco/hover), sin
      sombras, sin esquinas redondeadas, titulares en sans (no serif). */
.ccpw-preset-minimal-sobrio {
	--ccpw-preset-bg: var(--ccpw-white-warm);
	--ccpw-preset-fg: var(--ccpw-ink);
	--ccpw-preset-fg-muted: var(--ccpw-warm-gray);
	--ccpw-preset-accent: var(--ccpw-ink);
	--ccpw-preset-accent-contrast: var(--ccpw-white-warm);
	--ccpw-preset-border: var(--ccpw-border);
	--ccpw-preset-radius: 0px;
	--ccpw-preset-shadow: none;
	--ccpw-preset-title-font: var(--ccpw-font-sans);
	--ccpw-preset-title-style: normal;
	--ccpw-preset-title-weight: 700;
	--ccpw-preset-space-sm: 8px;
	--ccpw-preset-space-md: 18px;
	--ccpw-preset-space-lg: 36px;
	--ccpw-preset-icon-bg: transparent;
	--ccpw-preset-icon-fg: var(--ccpw-ink);
	--ccpw-preset-icon-border: none;
	--ccpw-preset-icon-radius: 0px;
	--ccpw-preset-eyebrow-color: var(--ccpw-ink);
	--ccpw-preset-eyebrow-tracking: 0.06em;
	--ccpw-preset-divider-weight: 1px;
}
.ccpw-preset-minimal-sobrio :is(a, button, [tabindex]):focus-visible {
	outline-color: var(--ccpw-gold);
}

/*
 * El botón ".ccpw-btn--outline" usa color:var(--ccpw-ink) fijo (pensado para
 * fondos claros); dentro del preset oscuro ese texto queda invisible sobre
 * su propio fondo. El widget ya ofrece un estilo "Fantasma claro" pensado
 * para fondos oscuros, pero elegirlo es una decisión de CONTENIDO por botón
 * (independiente del preset). Para que ".ccpw-btn--outline" siga siendo
 * legible incluso si no se cambió manualmente, el preset oscuro le da el
 * mismo tratamiento de contraste — sin tocar la clase "ghost-light" en sí.
 */
.ccpw-preset-alto-contraste-carbon .ccpw-btn--outline {
	color: var(--ccpw-preset-fg);
	border-color: rgba(255, 253, 249, 0.4);
}
.ccpw-preset-alto-contraste-carbon .ccpw-btn--outline:hover {
	background: rgba(255, 253, 249, 0.12);
	border-color: rgba(255, 253, 249, 0.7);
}