/*
 * Gastrototem · Tokens
 *
 * Custom properties con TODA la paleta y tokens del sistema.
 * Esta es la fuente de verdad: cualquier valor que necesite alguna
 * pieza de CSS del theme debe leerse de aquí.
 *
 * Cero hex literales en otros archivos. Cero font-family en otros.
 */

:root {
	/* ============================================================
	 * COLOR — Familia Tinta (color firma)
	 * ============================================================ */
	--gtt-color-tinta-50:  #EAEEF4;
	--gtt-color-tinta-100: #C8D2DF;
	--gtt-color-tinta-200: #97A8C0;
	--gtt-color-tinta-300: #647A9A;
	--gtt-color-tinta-400: #3D547A;
	--gtt-color-tinta-500: #1F3050;
	--gtt-color-tinta-600: #1B2944;
	--gtt-color-tinta-700: #152037;
	--gtt-color-tinta-800: #0F1828;
	--gtt-color-tinta-900: #0A101C;

	/* ============================================================
	 * COLOR — Familia Papel (soporte cálido)
	 * ============================================================ */
	--gtt-color-papel-50:  #FAF7F1;
	--gtt-color-papel-100: #EFEAE0;
	--gtt-color-papel-200: #E5DFD0;
	--gtt-color-papel-300: #D8D0BD;
	--gtt-color-papel-400: #C4BAA2;
	--gtt-color-papel-500: #A89D83;
	--gtt-color-papel-600: #8A8068;
	--gtt-color-papel-700: #6B6353;
	--gtt-color-papel-800: #4F4940;
	--gtt-color-papel-900: #33302C;

	/* ============================================================
	 * COLOR — Familia Grafito (texto y monocromo)
	 * Nota: 800 y 900 coinciden a propósito; 900 es color firma de
	 * cuerpo, 800 queda como alias para futuras necesidades.
	 * ============================================================ */
	--gtt-color-grafito-50:  #F5F4F1;
	--gtt-color-grafito-100: #E6E3DA;
	--gtt-color-grafito-200: #C9C4B8;
	--gtt-color-grafito-300: #9B968A;
	--gtt-color-grafito-400: #6B6760;
	--gtt-color-grafito-500: #3F3D38;
	--gtt-color-grafito-600: #2A2925;
	--gtt-color-grafito-700: #1F1E1B;
	--gtt-color-grafito-800: #1A1A22;
	--gtt-color-grafito-900: #1A1A22;

	/* ============================================================
	 * COLOR — Semánticos (UI funcional, NO copy editorial)
	 * ============================================================ */
	--gtt-color-success: #3D5A3A;
	--gtt-color-warning: #8B6B1F;
	--gtt-color-error: #7A2A2A;

	/* ============================================================
	 * COLOR — Aliases semánticos de uso
	 * ============================================================ */
	--gtt-color-bg:         var(--gtt-color-papel-100);
	--gtt-color-text:       var(--gtt-color-grafito-900);
	--gtt-color-text-muted: var(--gtt-color-grafito-500);
	--gtt-color-accent:     var(--gtt-color-tinta-500);
	--gtt-color-rule:       var(--gtt-color-grafito-200);

	/* Reservado: blanco puro solo para documentos administrativos. */
	--gtt-color-blanco-puro: #FFFFFF;

	/* ============================================================
	 * TIPOGRAFÍA — Pilas
	 * ============================================================ */
	--gtt-font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--gtt-font-serif: 'Source Serif 4', Georgia, serif;
	--gtt-font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	/* ============================================================
	 * TIPOGRAFÍA — Tamaños (clamp en los grandes para responsive)
	 * ============================================================ */
	--gtt-text-xs:   0.75rem;     /* 12px - notas al pie */
	--gtt-text-sm:   0.875rem;    /* 14px - texto secundario */
	--gtt-text-base: 1.0625rem;   /* 17px - cuerpo por defecto */
	--gtt-text-prose: 1.1875rem;  /* 19px - cuerpo de prosa (hoja-documento) */
	--gtt-text-lg:   1.25rem;     /* 20px - destacado */
	--gtt-text-xl:   1.5rem;      /* 24px - h3 */
	--gtt-text-2xl:  clamp(1.75rem, 3vw, 2rem);    /* 28-32px - h2 */
	--gtt-text-3xl:  clamp(2.25rem, 4vw, 3rem);    /* 36-48px - h1 */
	--gtt-text-4xl:  clamp(2.75rem, 6vw, 4.5rem);  /* 44-72px - hero */

	/* ============================================================
	 * TIPOGRAFÍA — Tracking y line-heights
	 * ============================================================ */
	--gtt-tracking-wide: 0.18em;   /* mono en mayúsculas */

	--gtt-leading-tight:   1.15;   /* titulares */
	--gtt-leading-snug:    1.35;   /* subtítulos */
	--gtt-leading-normal:  1.55;   /* cuerpo */
	--gtt-leading-prose:   1.6;    /* cuerpo de prosa (hoja-documento) */
	--gtt-leading-relaxed: 1.7;    /* cuerpo en piezas largas */

	/* ============================================================
	 * ESPACIADO — escala restringida
	 * ============================================================ */
	--gtt-space-1:  0.25rem;   /* 4px */
	--gtt-space-2:  0.5rem;    /* 8px */
	--gtt-space-3:  0.75rem;   /* 12px */
	--gtt-space-4:  1rem;      /* 16px */
	--gtt-space-6:  1.5rem;    /* 24px */
	--gtt-space-8:  2rem;      /* 32px */
	--gtt-space-12: 3rem;      /* 48px */
	--gtt-space-16: 4rem;      /* 64px */
	--gtt-space-24: 6rem;      /* 96px */
	--gtt-space-32: 8rem;      /* 128px */

	/* ============================================================
	 * CONTENEDORES
	 * ============================================================ */
	--gtt-container-prose:   38rem;   /* 608px - texto largo legible */
	--gtt-container-content: 64rem;   /* 1024px - contenido estándar */
	--gtt-container-wide:    80rem;   /* 1280px - secciones amplias */
}