/**
 * SIKER — design-token bridge.
 *
 * theme.json is the editable source of truth (the editor's colour, type and spacing
 * pickers write to it). This file aliases every preset to the short token name used
 * by the Claude Design system, so component CSS below reads exactly like the design
 * source and stays diffable against it.
 *
 * Never hard-code a hex, size or duration outside this file.
 */

:root {
	/* --- Ink scale (warm neutral) --------------------------------------- */
	--ink-1000: #000;
	--ink-900: var(--wp--preset--color--ink-900, #0a0a0a);
	--ink-800: var(--wp--preset--color--ink-800, #141414);
	--ink-700: var(--wp--preset--color--ink-700, #242220);
	--ink-600: var(--wp--preset--color--ink-600, #3b3835);
	--ink-500: var(--wp--preset--color--ink-500, #5c5854);
	--ink-400: var(--wp--preset--color--ink-400, #8a8580);
	--ink-300: var(--wp--preset--color--ink-300, #b4afa9);
	--ink-200: var(--wp--preset--color--ink-200, #d9d4cd);
	--ink-150: var(--wp--preset--color--ink-150, #e6e1da);
	--ink-100: var(--wp--preset--color--ink-100, #efebe5);
	--ink-050: var(--wp--preset--color--ink-050, #f7f5f1);
	--paper: var(--wp--preset--color--paper, #fff);

	/* --- Bronze accent. Under 2% of the ink on a page. ------------------- */
	--bronze-700: var(--wp--preset--color--bronze-700, #6e5a42);
	--bronze-500: var(--wp--preset--color--bronze-500, #9c8466);
	--bronze-300: var(--wp--preset--color--bronze-300, #c4b29a);
	--bronze-100: var(--wp--preset--color--bronze-100, #ede5d9);

	/* --- Channel / status ------------------------------------------------ */
	--whatsapp: var(--wp--preset--color--whatsapp, #25d366);
	--whatsapp-hover: #1fba5a;
	--status-success: #2e6b4f;
	--status-warning: #8a6a1f;
	--status-danger: #8c2f26;

	/* --- Semantic aliases. Components reference these, never the scale. ---
	   Only --ink-900, --ink-700 and --ink-500 may carry text on light grounds.
	   --ink-400 and lighter are non-text: icons at 17px+, hairlines, and labels
	   on near-black where they pass. */
	--text-strong: var(--ink-900);
	--text-body: var(--ink-600);
	--text-muted: var(--ink-500);
	--text-on-dark: var(--paper);
	--text-on-dark-muted: var(--ink-300);
	--text-eyebrow: var(--bronze-700);
	--text-link: var(--ink-900);
	--text-link-hover: var(--bronze-700);

	--surface-page: var(--paper);
	--surface-alt: var(--ink-050);
	--surface-card: var(--paper);
	--surface-inverse: var(--ink-900);
	--surface-media: var(--ink-800);

	--border-hairline: var(--ink-150);
	--border-strong: var(--ink-900);
	--border-on-dark: rgb(255 255 255 / 22%);

	--overlay-scrim: rgb(10 10 10 / 42%);
	--overlay-gradient: var(--wp--preset--gradient--proteccion, linear-gradient(180deg, rgb(10 10 10 / 0%) 30%, rgb(10 10 10 / 72%) 100%));
	--overlay-tile: var(--wp--preset--gradient--tile, linear-gradient(180deg, rgb(10 10 10 / 15%) 0%, rgb(10 10 10 / 68%) 100%));

	/* --- Type ------------------------------------------------------------ */
	--font-display: var(--wp--preset--font-family--display);
	--font-text: var(--wp--preset--font-family--display);
	--font-mono: var(--wp--preset--font-family--mono);

	--type-display-1: 800 var(--wp--preset--font-size--display-1) / 0.94 var(--font-display);
	--type-display-2: 800 var(--wp--preset--font-size--display-2) / 0.98 var(--font-display);
	--type-display-3: 700 var(--wp--preset--font-size--display-3) / 1.04 var(--font-display);
	--type-h1: 700 var(--wp--preset--font-size--heading-1) / 1.06 var(--font-display);
	--type-h2: 700 var(--wp--preset--font-size--heading-2) / 1.12 var(--font-display);
	--type-h3: 600 var(--wp--preset--font-size--heading-3) / 1.24 var(--font-display);
	--type-h4: 600 var(--wp--preset--font-size--heading-4) / 1.3 var(--font-display);
	--type-lead: 400 var(--wp--preset--font-size--lead) / 1.6 var(--font-text);
	--type-body: 400 var(--wp--preset--font-size--body) / 1.65 var(--font-text);
	--type-body-sm: 400 var(--wp--preset--font-size--body-sm) / 1.6 var(--font-text);
	--type-caption: 400 var(--wp--preset--font-size--caption) / 1.45 var(--font-text);
	--type-eyebrow: 600 var(--wp--preset--font-size--eyebrow) / 1.2 var(--font-display);
	--type-label: 600 var(--wp--preset--font-size--label) / 1.2 var(--font-display);
	--type-button: 600 var(--wp--preset--font-size--label) / 1 var(--font-display);
	--type-price: 700 var(--wp--preset--font-size--price) / 1.08 var(--font-display);

	--track-display: var(--wp--custom--track--display, -0.02em);
	--track-tight: var(--wp--custom--track--tight, -0.01em);
	--track-normal: 0;
	--track-eyebrow: var(--wp--custom--track--eyebrow, 0.18em);
	--track-button: var(--wp--custom--track--button, 0.1em);
	--track-nav: var(--wp--custom--track--nav, 0.06em);

	/* --- Spacing --------------------------------------------------------- */
	--space-0: 0;
	--space-1: var(--wp--preset--spacing--1, 4px);
	--space-2: var(--wp--preset--spacing--2, 8px);
	--space-3: var(--wp--preset--spacing--3, 12px);
	--space-4: var(--wp--preset--spacing--4, 16px);
	--space-5: var(--wp--preset--spacing--5, 20px);
	--space-6: var(--wp--preset--spacing--6, 24px);
	--space-7: var(--wp--preset--spacing--7, 32px);
	--space-8: var(--wp--preset--spacing--8, 40px);
	--space-9: var(--wp--preset--spacing--9, 48px);
	--space-10: var(--wp--preset--spacing--10, 64px);
	--space-11: var(--wp--preset--spacing--11, 80px);
	--space-12: var(--wp--preset--spacing--12, 104px);
	--space-13: var(--wp--preset--spacing--13, 136px);
	--space-14: var(--wp--preset--spacing--14, 176px);

	--section-pad-y: var(--wp--preset--spacing--section, clamp(64px, 8vw, 136px));
	--section-pad-y-tight: var(--wp--preset--spacing--section-tight, clamp(48px, 5vw, 80px));
	--gutter: var(--wp--preset--spacing--gutter, clamp(20px, 4vw, 56px));

	--stack-eyebrow-to-title: var(--space-4);
	--stack-title-to-body: var(--space-5);
	--stack-body-to-cta: var(--space-7);
	--grid-gap: var(--space-6);
	--card-pad: var(--space-6);
	--control-pad-x: var(--space-7);
	--control-pad-y: var(--space-4);

	/* --- Layout ---------------------------------------------------------- */
	--container-max: var(--wp--custom--container--max, 1320px);
	--container-narrow: var(--wp--custom--container--narrow, 880px);
	--container-text: var(--wp--custom--container--text, 660px);
	--header-h: var(--wp--custom--header--height, 84px);
	--header-h-mobile: var(--wp--custom--header--height-mobile, 64px);
	--tap-min: var(--wp--custom--tap--min, 44px);

	--z-header: var(--wp--custom--z--header, 100);
	--z-float: var(--wp--custom--z--float, 150);
	--z-offcanvas: var(--wp--custom--z--offcanvas, 200);
	--z-modal: var(--wp--custom--z--modal, 300);

	--ratio-hero: var(--wp--custom--ratio--hero, 16 / 9);
	--ratio-card: var(--wp--custom--ratio--card, 4 / 3);
	--ratio-tile: var(--wp--custom--ratio--tile, 3 / 4);
	--ratio-portrait: var(--wp--custom--ratio--portrait, 4 / 5);

	/* --- Corners. SIKER is a square-cornered brand. ---------------------- */
	--radius-none: 0;
	--radius-xs: var(--wp--custom--radius--xs, 2px);
	--radius-sm: var(--wp--custom--radius--sm, 4px);
	--radius-pill: var(--wp--custom--radius--pill, 999px);
	--radius-card: var(--radius-none);
	--radius-media: var(--radius-none);
	--radius-control: var(--radius-none);
	--radius-input: var(--radius-xs);

	/* --- Elevation. Separation comes from hairlines, not shadows. -------- */
	--shadow-none: none;
	--shadow-hairline: inset 0 0 0 1px var(--border-hairline);
	--shadow-raise: var(--wp--preset--shadow--raise);
	--shadow-card-hover: var(--wp--preset--shadow--card-hover);
	--shadow-float: var(--wp--preset--shadow--float);
	--shadow-header: 0 1px 0 var(--border-hairline);

	/* --- Motion. Short and eased, never playful. ------------------------- */
	--dur-instant: var(--wp--custom--duration--instant, 90ms);
	--dur-fast: var(--wp--custom--duration--fast, 180ms);
	--dur-base: var(--wp--custom--duration--base, 260ms);
	--dur-slow: var(--wp--custom--duration--slow, 420ms);
	--dur-reveal: var(--wp--custom--duration--reveal, 640ms);

	--ease-standard: var(--wp--custom--ease--standard, cubic-bezier(0.22, 0.61, 0.24, 1));
	--ease-out: var(--wp--custom--ease--out, cubic-bezier(0.16, 1, 0.3, 1));
	--ease-in-out: var(--wp--custom--ease--in-out, cubic-bezier(0.6, 0, 0.2, 1));

	--transition-control:
		color var(--dur-fast) var(--ease-standard),
		background-color var(--dur-fast) var(--ease-standard),
		border-color var(--dur-fast) var(--ease-standard),
		opacity var(--dur-fast) var(--ease-standard);
	--transition-media: transform var(--dur-slow) var(--ease-out);
	--media-hover-scale: var(--wp--custom--media--hover-scale, 1.035);
}