/*
 * tokens.css — maqueta alcazar (Real Alcázar de Segovia), derivada de castillo.
 * Cambios declarados respecto de castillo (encargo D1): nuevos --font-institutional
 * (Cinzel, solo el menú y los títulos del footer), --color-accent-text
 * (dorado oscuro para texto chico, D7) y --logo-min (166 px, D6). Los demás
 * nombres y valores, como en castillo.
 *
 * Los NOMBRES son los del contrato de scratch. Los valores salen de dos capas:
 *   1. --brand-*: la paleta de la institución (lo único que cambia un theme derivado);
 *   2. los roles (--color-*), calculados desde la marca con color-mix().
 * Referencia de estilo (modo inspiración): musee-orsay.fr — serif fina para
 * títulos, sans para texto, acentos dorados, bandas de color claras.
 */
@layer tokens {
	:root {
		/* ── Marca ─────────────────────────────────────────────────────── */
		--brand-dark:   #282e37;   /* superficies oscuras, botón principal, títulos */
		--brand-accent: #84764a;   /* filetes, puntos, bordes de píldora, activo (4,5:1 sobre blanco: no para texto chico) */
		--brand-ink:    #111;      /* texto */
		--brand-paper:  #fff;

		/* ── Color (roles) ─────────────────────────────────────────────── */
		--color-bg:         var(--brand-paper);
		--color-fg:         var(--brand-ink);
		--color-muted:      color-mix(in oklab, var(--brand-ink) 62%, var(--brand-paper));
		--color-accent:     var(--brand-accent);
		--color-accent-fg:  var(--brand-paper);
		--color-surface:    var(--brand-paper);
		--color-border:     color-mix(in oklab, var(--brand-ink) 14%, var(--brand-paper));
		--color-backdrop:   rgb(0 0 0 / 0.55);
		/* propios de castillo */
		--color-band:       color-mix(in oklab, var(--brand-accent) 16%, var(--brand-paper));   /* bandas (búsqueda, relacionados) */
		--color-soft:       color-mix(in oklab, var(--brand-dark) 5%, var(--brand-paper));      /* fondos de imagen, recuadros */
		--color-rule:       color-mix(in oklab, var(--brand-accent) 55%, var(--brand-paper));   /* filetes dorados */
		--color-strong:     var(--brand-dark);
		--color-strong-fg:  var(--brand-paper);
		/* propios de alcazar: el dorado como texto chico no llega a 4,5:1 (D7) */
		--color-accent-text: color-mix(in oklab, var(--brand-accent) 72%, var(--brand-ink));

		/* ── Tipografía ────────────────────────────────────────────────── */
		--font-body:     'Montserrat', system-ui, sans-serif;
		--font-heading:  'Unna', Georgia, 'Times New Roman', serif;
		/* Cinzel: solo el menú y los títulos del footer. Sin cursiva */
		--font-institutional: 'Cinzel', Georgia, serif;
		/* el menú y los textos de los botones de acción, en Cinzel */
		--nav-size:   clamp(0.9rem, 0.9rem + 0.2vw, 1rem);
		--nav-weight: 600;
		--font-mono:     ui-monospace, monospace;

		/* escala fluida (cuerpo un poco mayor y títulos un paso más chicos que la referencia) */
		--step--2: clamp(0.72rem, 0.7rem + 0.1vw,  0.78rem);
		--step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.9rem);
		--step-0:  clamp(0.98rem, 0.94rem + 0.2vw,  1.06rem);
		--step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
		--step-2:  clamp(1.35rem, 1.22rem + 0.6vw,  1.7rem);
		--step-3:  clamp(1.6rem,  1.4rem + 1vw,     2.15rem);
		--step-4:  clamp(1.95rem, 1.62rem + 1.6vw,  2.7rem);
		--step-5:  clamp(2.35rem, 1.85rem + 2.5vw,  3.4rem);

		--leading-tight: 1.15;
		--leading-body:  1.65;
		--measure:       68ch;

		/* ── 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(2.75rem, 2.5rem + 1.2vw,   3.5rem);
		--space-2xl: clamp(3.5rem,  3rem + 2.2vw,     5rem);
		--space-3xl: clamp(5rem,    4.2rem + 3.5vw,   7.5rem);

		/* ── Página ────────────────────────────────────────────────────── */
		--page-max:  76rem;                         /* contenido (la referencia usa ~64rem) */
		--gutter:    clamp(1rem, 0.4rem + 3vw, 3rem);

		/* ── Formas y movimiento ───────────────────────────────────────── */
		--radius-s:    2px;
		--radius-m:    4px;
		/* la «píldora» es biselada (ver «Bisel» en c-alcazar.css): el corte entra --bevel
		   en horizontal y llega a la mitad del alto, así el lado se colapsa en un vértice;
		   con 0.7rem el ángulo es más abierto que 45° en un botón de 32px */
		--bevel:       0.7rem;
		--radius-pill: var(--bevel) / 50%;
		--border-w:    1px;
		--duration:    0.2s;
		--easing:      ease-out;

		/* ── Imágenes de tarjetas ──────────────────────────────────────── */
		--card-ratio:    4 / 5;
		--card-fit:      contain;
		--card-position: center;
		--card-media-bg: var(--color-soft);

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

		/* ── Header ────────────────────────────────────────────────────── */
		--header-bg:          var(--color-bg);
		--header-pad:         var(--space-s);
		--header-pad-compact: var(--space-3xs);
		--logo-size:          3.4rem;
		--logo-min:           166px;   /* ancho mínimo del logo (44 mm, manual p. 17; D6) */
		--logo-size-compact:  2.4rem;
		--header-transition:  var(--duration);
		--scroll-threshold:   120;
	}
}