/*
 * La Galga Gris · tokens — Galga Charcoal Evolved
 * Tokens canónicos del design system. NO usar valores hex sueltos en componentes:
 * referencia siempre var(--color-...). Cualquier cambio aquí se propaga al theme entero.
 *
 * El bloque inicial duplica la firma de .studio-tokens/tokens.css para compat con orquestador.
 */

:root {
	/* ── Color · brand & UI ───────────────────────────────────────────── */
	--brand-primary: #3D4A55;
	--brand-secondary: #B8956A;
	--brand-accent: #D97757;
	--surface-base: #F5F2EC;
	--text-primary: #1A2026;

	--color-brand-primary: #3D4A55;
	--color-brand-primary-hover: #2F3A43;
	--color-brand-primary-active: #222A31;

	--color-ink-primary: #1A2026;
	--color-ink-secondary: #4A535C;
	--color-ink-muted: #7A8089;
	--color-ink-inverse: #F5F2EC;

	--color-bg-base: #F5F2EC;
	--color-bg-subtle: #EFEAE0;
	--color-bg-card: #FFFFFF;
	--color-bg-inverse: #1A2026;

	--color-accent: #D97757;
	--color-accent-hover: #C46545;
	--color-accent-soft: rgba(217, 119, 87, 0.14);

	--color-secondary: #B8956A;
	--color-secondary-soft: #D9C5A3;

	--color-success: #5F7A4F;
	--color-warning: #D9A441;
	--color-danger: #B04A3A;

	--color-border-subtle: #E0D9CB;
	--color-border-default: #C8BFAE;
	--color-border-strong: #3D4A55;
	--color-focus-ring: #D97757;

	/* ── Typography ───────────────────────────────────────────────────── */
	--font-display: 'Fraunces', 'DM Serif Display', Georgia, serif;
	--font-body: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

	--fz-micro: 0.75rem;
	--fz-small: 0.875rem;
	--fz-body: 1rem;
	--fz-body-l: 1.125rem;
	--fz-h4: 1.125rem;
	--fz-h3: clamp(1.375rem, 2vw, 1.75rem);
	--fz-h2: clamp(1.75rem, 3vw, 2.5rem);
	--fz-h1: clamp(2.25rem, 4vw, 3.5rem);
	--fz-display-l: clamp(2.75rem, 5vw, 4.5rem);
	--fz-display-xl: clamp(3.5rem, 7vw, 6.5rem);

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--lh-display: 1.05;
	--lh-heading: 1.15;
	--lh-body: 1.6;
	--lh-ui: 1.3;

	--ls-display: -0.02em;
	--ls-heading: -0.01em;
	--ls-body: 0;
	--ls-eyebrow: 0.12em;

	/* ── Spacing scale ─────────────────────────────────────────────────── */
	--sp-0: 0;
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-10: 8rem;
	--sp-11: 12rem;

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

	/* ── Shadow ───────────────────────────────────────────────────────── */
	--shadow-sm: 0 1px 2px rgba(26, 32, 38, 0.06);
	--shadow-md: 0 4px 14px rgba(26, 32, 38, 0.08);
	--shadow-lg: 0 16px 40px rgba(26, 32, 38, 0.12);
	--shadow-glow-accent: 0 0 0 4px rgba(217, 119, 87, 0.18);

	/* ── Motion ───────────────────────────────────────────────────────── */
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--dur-fast: 180ms;
	--dur-base: 320ms;
	--dur-slow: 600ms;
	--dur-hero: 1200ms;

	/* ── Container ────────────────────────────────────────────────────── */
	--container-narrow: 720px;
	--container-default: 1200px;
	--container-wide: 1440px;
	--container-pad-x: clamp(1rem, 4vw, 2rem);

	/* ── Z-index scale ────────────────────────────────────────────────── */
	--z-base: 1;
	--z-sticky: 10;
	--z-header: 50;
	--z-drawer: 80;
	--z-modal: 90;
	--z-overlay: 95;
	--z-toast: 100;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
		--dur-hero: 0ms;
	}
}