/*
 * RIFAYGANA · Tokens de diseño PROVISIONALES
 * ------------------------------------------------------------
 * Esta es la única capa que debe cambiar cuando llegue el branding oficial
 * (logotipo, mascota, paleta, tipografías, iconografía y animaciones).
 * main.css solo consume variables: no contiene colores ni familias tipográficas fijas.
 *
 * Dirección provisional: el vocabulario del talonario de rifas mexicano
 * (cartulina, perforación, tinta de sello y el amarillo del boleto) sin parecer casino.
 */

@font-face {
	font-family: "Bricolage Grotesque";
	src: url("../fonts/bricolage.woff2") format("woff2");
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
}
@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/instrument-sans.woff2") format("woff2");
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
}

:root {
	/* Color: base */
	--c-paper: #ffffff;        /* papel */
	--c-stock: #eef1f7;        /* cartulina fría */
	--c-stock-2: #e1e6f1;
	--c-line: #c9d0e2;
	--c-text: #1f2236;
	--c-muted: #565c78;

	/* Color: marca provisional */
	--c-ink: #232a5c;          /* tinta de sello */
	--c-ink-deep: #171c45;
	--c-ink-soft: #3d4585;
	--c-ticket: #ffd23f;       /* amarillo de boleto */
	--c-ticket-deep: #e9b500;

	/* Color: estados de boletos (son información, no decoración) */
	--c-free: var(--c-paper);
	--c-sel: var(--c-ticket);
	--c-held: #f39a3d;
	--c-paid: var(--c-ink);
	--c-ok: #1d7a4f;
	--c-err: #c0303b;

	/* Tipografía */
	--f-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
	--f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--stretch-tight: 78%;
	--stretch-num: 75%;

	/* Escala (razón ~1.25 con saltos editoriales en display) */
	--t-xs: 0.8125rem;
	--t-sm: 0.9375rem;
	--t-base: 1.0625rem;
	--t-md: 1.25rem;
	--t-lg: 1.5625rem;
	--t-xl: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
	--t-2xl: clamp(2.4rem, 1.6rem + 3vw, 3.75rem);
	--t-hero: clamp(3.4rem, 1.8rem + 5.8vw, 7.5rem);

	/* Espacio */
	--s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
	--s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
	--section: clamp(4rem, 2.5rem + 6vw, 8rem);
	--gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
	--wrap: 76rem;

	/* Formas: el radio depende de la jerarquía */
	--r-ticket: 18px;
	--r-card: 12px;
	--r-control: 10px;
	--r-cell: 6px;

	--shadow-ticket: 0 1px 0 rgba(23, 28, 69, .08), 0 18px 40px -24px rgba(23, 28, 69, .35);
	--ease: cubic-bezier(.2, .7, .2, 1);
}