/*
 * tokens.css — CONTRATO de variables de diseño.
 *
 * Los NOMBRES son fijos: los usan los componentes (c-*.css), las recetas y
 * las vistas. Los VALORES de acá son neutros (colores de sistema, fuentes
 * del sistema) para que scratch se lea sin diseño. Cada maqueta reemplaza
 * este archivo con sus valores; no inventa nombres nuevos para lo que ya
 * tiene nombre acá. Si hace falta uno nuevo, se agrega también en scratch.
 *
 * Tipografía y espaciado son FLUIDOS (clamp): crecen con el ancho entre
 * 20rem y 80rem de viewport, sin saltos por breakpoint (ver §4b del método).
 */
@layer tokens {
	:root {
		/* ── Marca ─────────────────────────────────────────────────────── */
		/* La paleta de la institución. Un theme puede calcular los roles de
		   abajo a partir de estas (castillo lo hace con color-mix()), así un
		   theme derivado cambia solo la marca. */
		--brand-dark:   CanvasText;
		--brand-accent: LinkText;
		--brand-ink:    CanvasText;
		--brand-paper:  Canvas;

		/* ── Color ─────────────────────────────────────────────────────── */
		--color-bg:            Canvas;       /* fondo de la página */
		--color-fg:            CanvasText;   /* texto principal */
		--color-muted:         GrayText;     /* texto secundario: fechas, etiquetas */
		--color-accent:        LinkText;     /* links, foco, elementos activos */
		--color-accent-fg:     Canvas;       /* texto sobre el acento */
		--color-surface:       Canvas;       /* menús, paneles, modales */
		--color-border:        GrayText;
		--color-backdrop:      rgb(0 0 0 / 0.5);
		--color-band:          color-mix(in srgb, CanvasText 6%, Canvas);   /* bandas: zonas de fondo a todo el ancho */
		--color-soft:          color-mix(in srgb, CanvasText 4%, Canvas);   /* fondo de imágenes y recuadros */
		--color-rule:          GrayText;     /* filetes y separadores */
		--color-strong:        CanvasText;   /* superficies oscuras (footer, botón principal), títulos */
		--color-strong-fg:     Canvas;       /* texto sobre --color-strong */

		/* ── Tipografía ────────────────────────────────────────────────── */
		--font-body:     system-ui, sans-serif;
		--font-heading:  var(--font-body);
		--font-mono:     ui-monospace, monospace;

		/* escala fluida: --step-0 es el cuerpo de texto */
		--step--2: clamp(0.69rem, 0.66rem + 0.14vw, 0.78rem);
		--step--1: clamp(0.83rem, 0.79rem + 0.21vw, 0.94rem);
		--step-0:  clamp(1rem,    0.95rem + 0.25vw, 1.13rem);
		--step-1:  clamp(1.2rem,  1.12rem + 0.39vw, 1.41rem);
		--step-2:  clamp(1.44rem, 1.31rem + 0.64vw, 1.76rem);
		--step-3:  clamp(1.73rem, 1.53rem + 1vw,    2.2rem);
		--step-4:  clamp(2.07rem, 1.77rem + 1.51vw, 2.75rem);
		--step-5:  clamp(2.49rem, 2.03rem + 2.28vw, 3.43rem);

		--leading-tight: 1.15;
		--leading-body:  1.5;
		--measure:       65ch;   /* largo máximo de línea para textos */

		/* ── Espaciado fluido ──────────────────────────────────────────── */
		--space-3xs: clamp(0.25rem, 0.23rem + 0.06vw, 0.31rem);
		--space-2xs: clamp(0.5rem,  0.48rem + 0.13vw, 0.56rem);
		--space-xs:  clamp(0.75rem, 0.71rem + 0.19vw, 0.88rem);
		--space-s:   clamp(1rem,    0.95rem + 0.25vw, 1.13rem);
		--space-m:   clamp(1.5rem,  1.43rem + 0.38vw, 1.69rem);
		--space-l:   clamp(2rem,    1.9rem + 0.5vw,   2.25rem);
		--space-xl:  clamp(3rem,    2.85rem + 0.75vw, 3.38rem);
		--space-2xl: clamp(4rem,    3.8rem + 1vw,     4.5rem);
		--space-3xl: clamp(6rem,    5.7rem + 1.5vw,   6.75rem);

		/* ── Página ────────────────────────────────────────────────────── */
		--page-max:  80rem;      /* ancho máximo del contenido */
		--gutter:    var(--space-s);   /* margen lateral de la página */

		/* ── Formas y movimiento ───────────────────────────────────────── */
		--radius-s:  0;
		--radius-m:  0;
		--radius-pill: 999px;
		--border-w:  1px;
		--duration:  0.25s;          /* transiciones de componentes y recetas */
		--easing:    ease;

		/* ── Imágenes de tarjetas (c-card y resultados de browse) ─────── */
		/* Por defecto NO se recorta: en una colección, cortar una obra cambia
		   lo que muestra. Un diseño que prefiere una grilla pareja usa cover. */
		--card-ratio:    4 / 3;        /* recuadro de la imagen; auto = la proporción de cada imagen (alturas distintas) */
		--card-fit:      contain;      /* contain = obra entera, con bandas | cover = llena el recuadro recortando */
		--card-position: center;       /* con cover: qué parte se conserva (p. ej. top para retratos) */
		--card-media-bg: transparent;  /* fondo de las bandas que deja contain */

		/* ── Capas (z-index) ───────────────────────────────────────────── */
		--z-header:   900;
		--z-dropdown: 1000;
		--z-popover:  1001;

		/* ── Header y scroll (recetas header-*.css, scroll-state.js) ───── */
		--header-bg:          var(--color-surface);
		--header-pad:         var(--space-s);
		--header-pad-compact: var(--space-3xs);
		--logo-size:          4rem;
		--logo-size-compact:  2rem;
		--header-transition:  var(--duration);
		--scroll-threshold:   100;   /* px, sin unidad: lo lee scroll-state.js */
	}
}