/**
 * Design tokens — esto-es-wm brand manual
 *
 * @package esto-es-wm
 */

:root {
	/* Colors */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-gray: #81807f;
	--color-purple: #6e24e5;
	--color-lime: #c1ff00;
	--color-lime-canva: #c6ff34;

	--color-text: var(--color-black);
	--color-text-muted: var(--color-gray);
	--color-text-inverse: var(--color-white);
	--color-background: var(--color-white);
	--color-surface: #f7f7f7;
	--color-surface-dark: var(--color-black);
	--color-border: var(--color-gray);
	--color-border-light: rgb(129 128 127 / 35%);

	--color-primary: var(--color-purple);
	--color-primary-contrast: var(--color-white);
	--color-accent: var(--color-lime);
	--color-accent-contrast: var(--color-black);

	/* Gradients */
	--gradient-1: linear-gradient(90deg, var(--color-lime) 0%, var(--color-black) 100%);
	--gradient-2: linear-gradient(90deg, var(--color-purple) 0%, var(--color-black) 100%);

	/* Typography — Poppins */
	--font-family-base: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-family-heading: var(--font-family-base);

	--font-size-caption: 0.875rem;   /* 14px */
	--font-size-sm: 1rem;            /* 16px */
	--font-size-base: 1.125rem;      /* 18px */
	--font-size-h3: 2rem;            /* 32px */
	--font-size-h2: 3rem;            /* 48px */
	--font-size-h1: 4.5rem;          /* 72px */

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

	--line-height-base: 1.6;
	--line-height-heading: 1.15;

	/* Spacing */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;

	/* Layout */
	--container-max: 75rem;
	--container-padding: clamp(1rem, 4vw, 2rem);
	--section-gap: var(--space-xl);
	--grid-gap: var(--space-md);

	/* Radius & effects */
	--radius-sm: 0.5rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;
	--radius-pill: 999px;
	--shadow-card: 0 4px 24px rgb(0 0 0 / 8%);
}

@media (max-width: 47.99rem) {
	:root {
		--font-size-h1: clamp(2.25rem, 8vw, 3rem);
		--font-size-h2: clamp(1.75rem, 5vw, 2.25rem);
		--font-size-h3: clamp(1.375rem, 4vw, 1.75rem);
	}
}