/*
 * 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: #6E5418;
	--gtt-color-error: #7A2A2A;
	/* Ámbar del modo revisión (solo staging): se lee sobre papel y sobre grafito. */
	--gtt-color-revision: #D9A21B;

	/* ============================================================
	 * 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', 'Inter Fallback', 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 */

	/* ============================================================
	 * LAYOUT — Altura del header fijo
	 * Fuente única para el scroll-padding de base.css y el padding
	 * superior de las plantillas. Los mismos valores que
	 * --header-height-mobile / --header-height-desktop de header.css.
	 * ============================================================ */
	--gtt-header-h: 64px;

	/* ============================================================
	 * COMPATIBILIDAD — Motor de reservas (plugin gastrototem-booking)
	 * El plugin consume estos tokens con fallback neutro. Aquí los
	 * mapeamos a la marca para que el flujo de reserva herede la
	 * identidad. La mayoría son alias a tokens de arriba; solo se
	 * introducen primitivos nuevos (radios, transición) y los tintes
	 * semánticos claros que la marca dejó incompletos.
	 * ============================================================ */

	/* Alias a marca */
	--gtt-color-primary:        var(--gtt-color-tinta-500);   /* texto enfático y botón primario */
	--gtt-color-accent-light:   var(--gtt-color-tinta-400);   /* variante clara del acento */
	--gtt-color-accent-dark:    var(--gtt-color-tinta-700);   /* hover/active de botones y acentos */
	--gtt-color-border:         var(--gtt-color-rule);        /* bordes neutros (= grafito-200) */
	--gtt-color-text-secondary: var(--gtt-color-text-muted);  /* texto auxiliar (= grafito-500) */
	--gtt-color-bg-secondary:   var(--gtt-color-papel-50);    /* cards cálidas sobre papel-100 */
	--gtt-font-primary:         var(--gtt-font-sans);         /* fuente principal del plugin (Inter) */

	/* Primitivos — esquinas editoriales mínimas */
	--gtt-radius:    2px;
	--gtt-radius-lg: 4px;
	--gtt-transition: 0.18s ease;

	/* Regla "hairline": Grafito al 12%. Sustituye a los bordes de caja en
	   el lenguaje editorial del motor de reservas (separa sin encerrar). */
	--gtt-color-hairline: rgba(26, 26, 34, .12);

	/* Tintes semánticos claros (desaturados, en armonía con Papel).
	 * El color sólido (success/warning/error) ya está definido arriba. */
	--gtt-color-success-bg:     #E3E8DC;
	--gtt-color-success-border: #C2CDB6;
	--gtt-color-success-text:   #2C4429;
	--gtt-color-warning-bg:     #F2E8CE;
	--gtt-color-warning-border: #E0CFA0;
	--gtt-color-error-bg:       #EFDCD8;
	--gtt-color-error-border:   #D9B5AE;

	/* Info — la marca no la define; familia azul-tinta sobria */
	--gtt-color-info:        var(--gtt-color-tinta-500);
	--gtt-color-info-bg:     #DFE4EC;
	--gtt-color-info-border: #BDC8D8;

	/* Tokens que el plugin consume y que faltaban (caía a fallbacks grises de
	 * bajo contraste). text-faint y placeholder a grafito-400 = 4,69:1 sobre
	 * papel-100 (AA). */
	--gtt-color-text-faint:     var(--gtt-color-grafito-400);
	--gtt-color-placeholder:    var(--gtt-color-grafito-400);
	--gtt-color-surface-raised: var(--gtt-color-papel-50);
	--gtt-color-surface-sunken: var(--gtt-color-papel-200);
	--gtt-color-surface-input:  var(--gtt-color-papel-50);
	--gtt-color-border-strong:  var(--gtt-color-grafito-300);
	--gtt-color-on-accent:      var(--gtt-color-papel-100);
	--gtt-color-success-soft:   var(--gtt-color-success-bg);
	--gtt-color-cal-available:  var(--gtt-color-tinta-50);
	--gtt-radius-sm: 2px;
	--gtt-radius-md: 4px;
}

/* Altura del header en escritorio (idéntica a --header-height-desktop). */
@media (min-width: 1024px) {
	:root {
		--gtt-header-h: 80px;
	}
}