/*
 * Tokens de Almagnética.
 *
 * Mismos nombres que Forest (--fr-*): el tema NUNCA usa un color, tamaño o
 * radio suelto, solo estas variables. Para pasar al design system real:
 * crear la marca `almagnetica` en Forest (forest-brand create almagnetica …),
 * generar sus tokens recortados con `scripts/forest-tokens.mjs` y reemplazar
 * este archivo. Las plantillas y style.css no cambian.
 *
 * Valores de arranque (2026-10-10): moda de autor, editorial y sobria. Lienzo
 * marfil, tinta casi negra, un acento terracota apagado. Se reemplazan cuando
 * llegue el brief de la diseñadora.
 */
:root {
	/* Tipografía */
	--fr-font-family-display: "Cormorant Garamond", "Times New Roman", serif;
	--fr-font-family-sans: "Inter", system-ui, -apple-system, sans-serif;
	--fr-font-weight-regular: 400;
	--fr-font-weight-medium: 500;
	--fr-font-weight-semibold: 600;

	--fr-type-display-lg-size: clamp(3rem, 7vw, 6.5rem);
	--fr-type-display-lg-line-height: 0.95;
	--fr-type-display-md-size: clamp(2.4rem, 5vw, 4.2rem);
	--fr-type-display-md-line-height: 1;
	--fr-type-headline-lg-size: clamp(1.9rem, 3.4vw, 2.8rem);
	--fr-type-headline-lg-line-height: 1.05;
	--fr-type-headline-md-size: clamp(1.4rem, 2.4vw, 1.9rem);
	--fr-type-headline-md-line-height: 1.15;
	--fr-type-title-md-size: 1.15rem;
	--fr-type-title-md-line-height: 1.3;
	--fr-type-body-lg-size: 1.125rem;
	--fr-type-body-lg-line-height: 1.65;
	--fr-type-body-md-size: 1rem;
	--fr-type-body-md-line-height: 1.65;
	--fr-type-body-sm-size: 0.875rem;
	--fr-type-body-sm-line-height: 1.55;
	--fr-type-label-md-size: 0.8rem;
	--fr-type-label-md-line-height: 1.2;
	--fr-type-eyebrow-md-size: 0.72rem;
	--fr-type-eyebrow-md-line-height: 1.2;
	--fr-font-letter-spacing-display: -0.02em;
	--fr-font-letter-spacing-eyebrow: 0.28em;
	--fr-type-measure: 64ch;

	/* Color: superficies */
	--fr-color-bg-canvas: #f5f1ea;
	--fr-color-surface-page: #f5f1ea;
	--fr-color-surface-card: #fbf9f5;
	--fr-color-surface-raised: #ebe4d8;
	--fr-color-bg-overlay: rgba(20, 18, 16, 0.55);

	/* Color: texto */
	--fr-color-text-primary: #161412;
	--fr-color-text-secondary: #6b645a;
	--fr-color-text-inverse: #f5f1ea;
	--fr-color-text-accent: #8e4a32;

	/* Color: bordes */
	--fr-color-border-default: #d8cfc1;
	--fr-color-border-subtle: #e6dfd3;
	--fr-color-border-focus: #161412;

	/* Color: acciones */
	--fr-color-action-primary-bg: #161412;
	--fr-color-action-primary-bg-hover: #3a352f;
	--fr-color-action-primary-text: #f5f1ea;
	--fr-color-action-ghost-text: #161412;
	--fr-color-action-ghost-border: #161412;
	--fr-color-action-link: #8e4a32;
	--fr-color-action-focus: #8e4a32;

	/* Color: estados */
	--fr-color-status-success-bg: #e7efe6;
	--fr-color-status-success-text: #2f5a34;
	--fr-color-status-danger-bg: #f6e3df;
	--fr-color-status-danger-text: #8a2e22;
	--fr-color-status-info-bg: #ebe4d8;
	--fr-color-status-info-text: #161412;
	--fr-color-emphasis-primary: #8e4a32;
	--fr-color-emphasis-primary-text: #f5f1ea;

	/* Espacio */
	--fr-space-1: 0.25rem;
	--fr-space-2: 0.5rem;
	--fr-space-3: 0.75rem;
	--fr-space-4: 1rem;
	--fr-space-6: 1.5rem;
	--fr-space-8: 2rem;
	--fr-space-12: 3rem;
	--fr-space-16: 4rem;
	--fr-space-24: 6rem;
	--fr-space-32: 8rem;

	/* Forma: moda pide líneas rectas; botones y campos casi sin radio */
	--fr-shape-control: 0;
	--fr-shape-field: 0;
	--fr-shape-card: 0;
	--fr-shape-badge: 0;
	--fr-radius-pill: 999px;

	/* Layout */
	--fr-layout-container: 1360px;
	--fr-layout-container-narrow: 760px;
	--fr-layout-gutter: clamp(1rem, 4vw, 2.5rem);

	/* Movimiento */
	--fr-motion-duration-fast: 180ms;
	--fr-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
}