/*
 * Nombres de token del tema, con valores neutros.
 * Se encola antes que base.css y que la identidad; identity/identity.css los
 * sobrescribe. Aquí no se escribe ningún color, familia tipográfica ni activo.
 */

:root {
	/* --- Color ---
	 * Los valores neutros son colores de sistema: los resuelve el navegador,
	 * no llevan marca y mantienen legible cualquier pareja texto/fondo si la
	 * identidad se retira. Nunca se sustituyen por un valor escrito. */
	--color-brand-blue: CanvasText;
	--color-brand-purple: CanvasText;
	--color-brand-orange: CanvasText;
	--color-brand-green: CanvasText;
	--color-brand-deep: CanvasText;

	--color-action-default: CanvasText;
	--color-action-hover: CanvasText;
	--color-action-subtle: Canvas;

	--color-surface-base: Canvas;
	--color-surface-raised: Canvas;
	--color-surface-diagonal: Canvas;
	--color-surface-emphasis: CanvasText;
	--color-surface-sunken: Canvas;

	--color-ink-primary: CanvasText;
	--color-ink-secondary: CanvasText;
	--color-ink-muted: GrayText;
	--color-ink-inverse: Canvas;
	--color-ink-on-emphasis: Canvas;
	--color-ink-link: LinkText;

	--color-border-default: ButtonBorder;
	--color-border-strong: ButtonBorder;
	--color-border-control: ButtonBorder;
	--color-border-focus: CanvasText;
	--color-border-focus-inverse: Canvas;

	--color-state-success: CanvasText;
	--color-state-error: CanvasText;
	--color-state-warning: CanvasText;
	--color-state-info: CanvasText;

	/* La `ink` de cada familia es la que va bajo texto pequeño. No siempre
	 * coincide con el color de la familia: el color de forma puede quedarse por
	 * debajo del contraste que exige el texto de etiqueta. */
	--color-branch-growth: CanvasText;
	--color-branch-growth-ink: CanvasText;
	--color-branch-growth-tint: Canvas;
	--color-branch-growth-wash: Canvas;
	--color-branch-transform: CanvasText;
	--color-branch-transform-ink: CanvasText;
	--color-branch-transform-tint: Canvas;
	--color-branch-transform-wash: Canvas;
	--color-branch-impulse: CanvasText;
	--color-branch-impulse-ink: CanvasText;
	--color-branch-impulse-tint: Canvas;
	--color-branch-impulse-wash: Canvas;

	/* Familia de sección activa. La identidad declara cuántas familias hay y una
	 * clase por cada una las apunta aquí; el tema nunca enumera las familias. */
	--color-branch: var(--color-brand-purple);
	--color-branch-ink: var(--color-brand-purple);
	--color-branch-tint: var(--color-surface-sunken);
	--color-branch-wash: var(--color-surface-diagonal);

	/* El tinte de las sombras es color: sin identidad no hay sombra. */
	--color-shadow-card: transparent;
	--color-shadow-overlay: transparent;

	/* --- Tipografía ---
	 * Solo familias genéricas: el nombre de la familia lo pone la identidad. */
	--font-family-base: system-ui, sans-serif;
	--font-family-display: system-ui, sans-serif;

	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-bold: 700;
	--font-weight-black: 900;

	--font-size-eyebrow: 0.6875rem;
	--font-size-caption: 0.75rem;
	--font-size-small: 0.875rem;
	--font-size-body: 1rem;
	--font-size-body-lg: 1.125rem;
	--font-size-h4: 1.25rem;
	--font-size-h3: 1.5rem;
	--font-size-h2: 2rem;
	--font-size-h1: 2.75rem;
	--font-size-display: 3.5rem;

	--font-leading-tight: 1.06;
	--font-leading-snug: 1.25;
	--font-leading-normal: 1.65;

	--font-tracking-tight: -0.035em;
	--font-tracking-eyebrow: 0.18em;

	/* --- Radios ---
	 * La esquina del pétalo va suelta porque el relleno compensatorio y el
	 * escalón de tarjeta estrecha la necesitan por separado. La lista de los
	 * cuatro radios NO se compone aquí: una propiedad personalizada que contiene
	 * otra se resuelve en el elemento donde se declara, así que compuesta en la
	 * raíz llegaría con la esquina ancha ya fijada y el escalón dejaría de
	 * cambiar la curva. Se compone en `base.css`, sobre el propio pétalo. */
	--rounded-none: 0;
	--rounded-sm: 6px;
	--rounded-md: 12px;
	--rounded-lg: 20px;
	--rounded-pill: 99px;
	--rounded-petal-corner: 72px;
	--rounded-petal-corner-narrow: 48px;

	/* --- Espaciado --- */
	--spacing-unit: 4px;
	--spacing-xs: 8px;
	--spacing-sm: 12px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 40px;
	--spacing-2xl: 64px;
	--spacing-3xl: 96px;
	--spacing-section: clamp(64px, 10vw, 128px);
	--spacing-gutter: clamp(20px, 5vw, 40px);
	--spacing-measure: 68ch;

	/* --- Profundidad --- */
	--shadow-flat: none;
	--shadow-card: 0 6px 24px var(--color-shadow-card);
	--shadow-overlay: 0 12px 40px var(--color-shadow-overlay);

	/* --- Maquetación --- */
	--layout-max-width: 1180px;
	--layout-touch-target: 44px;
}