/*
 * tokens.css
 * Variáveis do filho: cores de marca, container, radius, sombras, grid e
 * espaçamento vertical de seção (--jrx-section-py* vindo das configs ACF).
 * Tipografia de corpo e títulos: personalizar do tema pai (sem tokens aqui).
 */

:root {
	/* Cores base */
	--jrx-color-primary: var(--theme-palette-color-1, #2563eb);
	--jrx-color-primary-contrast: var(--theme-palette-color-8, #ffffff);
	--jrx-color-accent: var(--theme-palette-color-2, #f59e0b);
	--jrx-color-text: var(--theme-text-color, #0f172a);
	--jrx-color-text-muted: var(--theme-palette-color-4, #475569);
	--jrx-color-heading: var(--theme-headings-color, var(--theme-text-color, #0f172a));
	--jrx-color-bg: var(--theme-palette-color-8, #ffffff);
	--jrx-color-bg-alt: var(--theme-palette-color-7, #f8fafc);
	--jrx-color-border: var(--theme-border-color, var(--theme-palette-color-6, #e2e8f0));
	--jrx-color-card-bg: var(--theme-palette-color-8, #ffffff);
	--jrx-color-card-border: var(--theme-border-color, var(--theme-palette-color-6, #e5e7eb));
	--jrx-color-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);

	/* Espaçamento padrão de seção (vertical) */
	--jrx-section-py: clamp(3rem, 6vw, 6rem);

	/* Container — o padrão usa a classe `ct-container` do tema pai (Blocksy).
	   Estas vars aplicam-se às variantes --wide/--boxed. */
	--jrx-container-default: 1200px;
	--jrx-container-wide: 1440px;
	--jrx-container-boxed: 960px;
	--jrx-container-gutter: clamp(1rem, 3vw, 2rem);

	/* Raios e sombras */
	--jrx-radius-sm: 6px;
	--jrx-radius-md: 12px;
	--jrx-radius-lg: 20px;
	--jrx-radius-pill: 999px;
	--jrx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
	--jrx-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
	--jrx-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.10);

	/* Grid */
	--jrx-grid-gap: 1.5rem;

	/* Transições */
	--jrx-transition: 180ms ease;
}

/* ------------------------------------------------------------------
 * Variações de seção (definem a paleta da seção inteira)
 * Cada variação redefine tokens locais usados pelos componentes.
 * ------------------------------------------------------------------ */

.jrx-section[data-variant="default"] {
	--jrx-s-bg: var(--jrx-color-bg);
	--jrx-s-text: var(--jrx-color-text);
	--jrx-s-heading: var(--jrx-color-heading);
	--jrx-s-muted: var(--jrx-color-text-muted);
	--jrx-s-accent: var(--jrx-color-primary);
	--jrx-s-card-bg: var(--jrx-color-card-bg);
	--jrx-s-card-border: var(--jrx-color-card-border);
	--jrx-s-card-text: var(--jrx-color-text);
}

.jrx-section[data-variant="light"] {
	--jrx-s-bg: var(--jrx-color-bg-alt);
	--jrx-s-text: var(--jrx-color-text);
	--jrx-s-heading: var(--jrx-color-heading);
	--jrx-s-muted: var(--jrx-color-text-muted);
	--jrx-s-accent: var(--jrx-color-primary);
	--jrx-s-card-bg: #ffffff;
	--jrx-s-card-border: var(--jrx-color-card-border);
	--jrx-s-card-text: var(--jrx-color-text);
}

.jrx-section[data-variant="dark"] {
	--jrx-s-bg: color-mix(in srgb, var(--jrx-color-primary) 25%, black);
	--jrx-s-text: color-mix(in srgb, var(--jrx-color-primary-contrast) 86%, transparent);
	--jrx-s-heading: var(--jrx-color-primary-contrast);
	--jrx-s-muted: color-mix(in srgb, var(--jrx-color-primary-contrast) 70%, transparent);
	--jrx-s-accent: color-mix(in srgb, var(--jrx-color-primary-contrast) 86%, transparent);
	--jrx-s-card-bg: color-mix(in srgb, var(--jrx-color-primary) 22%, black);
	--jrx-s-card-border: color-mix(in srgb, var(--jrx-color-primary-contrast) 18%, transparent);
	--jrx-s-card-text: color-mix(in srgb, var(--jrx-color-primary-contrast) 92%, transparent);
	--jrx-s-btn-outline: var(--jrx-s-heading);
	--jrx-s-btn-outline-hover-bg: var(--jrx-s-heading);
	--jrx-s-btn-outline-hover-text: var(--jrx-color-primary);
}

.jrx-section[data-variant="primary"] {
	--jrx-s-bg: var(--jrx-color-primary);
	--jrx-s-text: color-mix(in srgb, var(--jrx-color-primary-contrast) 92%, transparent);
	--jrx-s-heading: var(--jrx-color-primary-contrast);
	--jrx-s-muted: color-mix(in srgb, var(--jrx-color-primary-contrast) 72%, transparent);
	--jrx-s-accent: var(--jrx-color-primary-contrast);
	--jrx-s-card-bg: rgba(255, 255, 255, 0.08);
	--jrx-s-card-border: rgba(255, 255, 255, 0.18);
	--jrx-s-card-text: var(--jrx-color-primary-contrast);
	--jrx-s-btn-outline: var(--jrx-s-heading);
	--jrx-s-btn-outline-hover-bg: var(--jrx-s-heading);
	--jrx-s-btn-outline-hover-text: var(--jrx-color-primary);
}

.jrx-section[data-variant="accent"] {
	--jrx-s-bg: var(--jrx-color-accent);
	--jrx-s-text: var(--jrx-color-heading);
	--jrx-s-heading: var(--jrx-color-heading);
	--jrx-s-muted: var(--jrx-color-text-muted);
	--jrx-s-accent: var(--jrx-color-heading);
	--jrx-s-card-bg: var(--jrx-color-bg);
	--jrx-s-card-border: color-mix(in srgb, var(--jrx-color-heading) 15%, transparent);
	--jrx-s-card-text: var(--jrx-color-heading);
}

.jrx-section[data-variant="gradient"] {
	--jrx-s-bg: linear-gradient(135deg, var(--jrx-color-primary) 0%, var(--jrx-color-accent) 100%);
	--jrx-s-text: color-mix(in srgb, var(--jrx-color-primary-contrast) 92%, transparent);
	--jrx-s-heading: var(--jrx-color-primary-contrast);
	--jrx-s-muted: color-mix(in srgb, var(--jrx-color-primary-contrast) 72%, transparent);
	--jrx-s-accent: var(--jrx-color-primary-contrast);
	--jrx-s-card-bg: rgba(255, 255, 255, 0.10);
	--jrx-s-card-border: rgba(255, 255, 255, 0.22);
	--jrx-s-card-text: var(--jrx-color-primary-contrast);
	--jrx-s-btn-outline: var(--jrx-s-heading);
	--jrx-s-btn-outline-hover-bg: var(--jrx-s-heading);
	--jrx-s-btn-outline-hover-text: var(--jrx-color-primary);
}