/*
 * LIEG — design tokens
 *
 * All design decisions live here as CSS custom properties.
 * Components MUST consume var(--token), never hard-coded values.
 *
 * Source of truth: /var/www/html/lieg/new-visual-identity/
 *   - logo-lieg.png
 *   - identity-cultura-genero.jpg
 *   - silhouettes-aa9a.png
 *
 * If the brand spec changes, change the tokens here, not the components.
 */

:root {
	/* ── Brand palette ────────────────────────────────────────
	 * Sampled from the identity mockup (purple → magenta → pink
	 * gradient over white). Names follow the role they play in
	 * the UI, not the raw hue.
	 */
	--color-brand-primary:        #9E2A6E;   /* "Cultura" wordmark magenta */
	--color-brand-primary-dark:   #7A1F58;   /* hover / pressed */
	--color-brand-primary-light:  #C24A8E;   /* accent surface */

	--color-brand-accent:         #E94B7B;   /* ribbon / CTA highlight */
	--color-brand-accent-dark:    #C7396A;

	--color-brand-deep:           #3A1B5A;   /* silhouette / dark text on light */
	--color-brand-violet:         #7A36B5;   /* mid gradient stop */
	--color-brand-violet-dark:    #4F1F84;

	--color-brand-soft:           #F4A6C0;   /* highlight tint */
	--color-brand-soft-bg:        #FCEAF1;   /* tinted surface */

	/* ── Neutrals ─────────────────────────────────────────── */
	--color-bg:                   #ffffff;
	--color-bg-alt:               #FAF7FB;   /* very light lavender wash */
	--color-surface:              #ffffff;
	--color-border:               #E4DCE8;
	--color-border-strong:        #B9A8C5;

	--color-text:                 #1A1422;   /* near-black with violet tint */
	--color-text-muted:           #5A4A66;
	--color-text-inverse:         #ffffff;

	--color-link:                 var(--color-brand-primary);
	--color-link-hover:           var(--color-brand-primary-dark);
	--color-link-visited:         var(--color-brand-violet-dark);

	--color-focus-ring:           #E94B7B;   /* high-contrast against light bg */
	--color-selection-bg:         var(--color-brand-soft);
	--color-selection-text:       var(--color-brand-deep);

	--color-success:              #2F8F5E;
	--color-warning:              #B8730E;
	--color-error:                #B3261E;

	/* ── Typography ───────────────────────────────────────── */
	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
	             Arial, "Noto Sans", "Liberation Sans", sans-serif;
	--font-serif: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
	              P052, "DejaVu Serif", serif;
	--font-display: var(--font-sans);    /* swap to a webfont later if needed */

	--font-size-xs:    0.8125rem;   /* 13px */
	--font-size-sm:    0.9375rem;   /* 15px */
	--font-size-base:  1rem;        /* 16px */
	--font-size-md:    1.125rem;    /* 18px */
	--font-size-lg:    1.375rem;    /* 22px */
	--font-size-xl:    1.75rem;     /* 28px */
	--font-size-2xl:   2.25rem;     /* 36px */
	--font-size-3xl:   3rem;        /* 48px */
	--font-size-4xl:   3.75rem;     /* 60px */

	--line-height-tight:   1.15;
	--line-height-snug:    1.35;
	--line-height-normal:  1.6;
	--line-height-loose:   1.75;

	--font-weight-regular: 400;
	--font-weight-medium:  500;
	--font-weight-bold:    700;

	--letter-spacing-tight: -0.01em;
	--letter-spacing-wide:   0.02em;

	/* ── Spacing (4px scale) ──────────────────────────────── */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.5rem;
	--space-6:  2rem;
	--space-7:  3rem;
	--space-8:  4rem;
	--space-9:  6rem;
	--space-10: 8rem;

	/* ── Layout ───────────────────────────────────────────── */
	--measure-prose:   78ch;        /* optimal reading width */
	--container-narrow: 720px;
	--container-base:  1040px;
	--container-wide:  1240px;

	/* ── Radius ───────────────────────────────────────────── */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	/* ── Elevation ────────────────────────────────────────── */
	--shadow-sm: 0 1px 2px rgba(58, 27, 90, 0.08);
	--shadow-md: 0 4px 12px rgba(58, 27, 90, 0.10);
	--shadow-lg: 0 12px 32px rgba(58, 27, 90, 0.12);

	/* ── Motion ───────────────────────────────────────────── */
	--duration-fast:   120ms;
	--duration-base:   200ms;
	--duration-slow:   360ms;
	--ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
	--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

	/* ── Z-index scale ────────────────────────────────────── */
	--z-base:    1;
	--z-sticky:  10;
	--z-overlay: 100;
	--z-modal:   1000;
	--z-toast:   1100;

	/* ── Breakpoints (used by JS; kept here for consistency) ─
	 * Mobile first. Mirrored in functions.php if we ever need
	 * to expose them to PHP.
	 */
	--bp-sm: 480px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1280px;
}

/* Selection colour is part of the brand experience. */
::selection {
	background: var(--color-selection-bg);
	color: var(--color-selection-text);
}

/* Respect user motion preferences globally. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}