@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&display=swap");
/* ============================================================
   GREENERY 420 · Tokens de marca + fuentes (self-hosted)
   Copiado del sistema de diseño canónico (claude design/_new).
   Recoleta → titulares · TT Norms Pro → UI · Hanken Grotesk → cuerpo.
   ============================================================ */

/* ---------- Recoleta (serif · titulares) ---------- */
@font-face {
	font-family: "Recoleta"; font-weight: 500; font-style: normal; font-display: swap;
	src: url("fonts/Recoleta-Medium.woff2") format("woff2");
}
@font-face {
	font-family: "Recoleta"; font-weight: 600; font-style: normal; font-display: swap;
	src: url("fonts/Recoleta-SemiBold.woff2") format("woff2");
}

/* ---------- TT Norms Pro (sans geométrica · UI / eyebrows / botones) ---------- */
@font-face {
	font-family: "TT Norms Pro"; font-weight: 400; font-style: normal; font-display: swap;
	src: url("fonts/TTNorms-Regular.otf") format("opentype");
}
@font-face {
	font-family: "TT Norms Pro"; font-weight: 500; font-style: normal; font-display: swap;
	src: url("fonts/TTNorms-Medium.otf") format("opentype");
}
@font-face {
	font-family: "TT Norms Pro"; font-weight: 700; font-style: normal; font-display: swap;
	src: url("fonts/TTNorms-Bold.otf") format("opentype");
}

/* ---------- Hanken Grotesk (cuerpo): el @import va al principio del archivo ---------- */


:root {
	/* Paleta · el marco */
	--gy-blanco:        #FFFFFF;
	--gy-crema:         #F6F3EC;
	--gy-verde-claro:   #E1EBCD;
	--gy-salvia:        #A9C0A0;
	--gy-lavanda:       #BAB5F6;
	--gy-morado:        #7C6BD6;
	--gy-morado-oscuro: #5A4FB0;
	--gy-tinta:         #33322E;

	/* Tintas de apoyo */
	--gy-tinta-70:      #4A4943;
	--gy-tinta-50:      #6B6A62;
	--gy-tinta-30:      #8F8C83;
	--gy-linea:         rgba(51, 50, 46, 0.12);
	--gy-linea-suave:   rgba(51, 50, 46, 0.08);
	--gy-verde-bosque:  #4E6B3E;

	/* Roles semánticos */
	--gy-bg:            var(--gy-blanco);
	--gy-bg-calido:     var(--gy-crema);
	--gy-surface-card:  var(--gy-blanco);
	--gy-text:          var(--gy-tinta);
	--gy-text-muted:    var(--gy-tinta-70);
	--gy-text-subtle:   var(--gy-tinta-50);
	--gy-link:          var(--gy-morado-oscuro);
	--gy-link-hover:    var(--gy-morado);
	--gy-cta-bg:        var(--gy-morado);
	--gy-cta-text:      var(--gy-blanco);
	--gy-cta-bg-hover:  var(--gy-lavanda);
	--gy-cta-text-hover:var(--gy-morado-oscuro);
	--gy-border:        var(--gy-linea);

	/* Tipografía */
	--gy-font-display: "Recoleta", Georgia, "Times New Roman", serif;
	--gy-font-ui:      "TT Norms Pro", "Inter", system-ui, sans-serif;
	--gy-font-body:    "Hanken Grotesk", "Inter", system-ui, -apple-system, sans-serif;
	--gy-w-medium: 500; --gy-w-semibold: 600; --gy-w-bold: 700;
	--gy-fs-eyebrow: 0.8125rem; --gy-fs-small: 0.875rem; --gy-fs-body: 1rem; --gy-fs-lead: 1.125rem;
	--gy-lh-body: 1.65; --gy-lh-heading: 1.08;
	--gy-ls-eyebrow: 0.14em; --gy-ls-heading: -0.005em;

	/* Espaciado (base 8) */
	--gy-space-1: 0.5rem; --gy-space-2: 0.75rem; --gy-space-3: 1rem; --gy-space-4: 1.5rem;
	--gy-space-5: 2rem; --gy-space-6: 3rem; --gy-space-7: 4rem;

	/* Radios */
	--gy-radius-sm: 6px; --gy-radius-md: 10px; --gy-radius-lg: 16px; --gy-radius-xl: 18px; --gy-radius-pill: 999px;

	/* Sombras · ligeras y difusas */
	--gy-shadow-xs: 0 2px 10px rgba(51, 50, 46, 0.08);
	--gy-shadow-sm: 0 6px 24px rgba(51, 50, 46, 0.12);
	--gy-shadow-md: 0 12px 32px rgba(51, 50, 46, 0.10);

	/* Motion */
	--gy-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
	--gy-dur-fast: 0.18s; --gy-dur-base: 0.3s;

	/* Layout */
	--gy-content: 1120px;
}