/*
 * Terapias Bienestar — Foundation
 * Tokens del Design System oficial de la marca (TBL · Esther Madrid).
 *
 * Origen: `colors_and_type.css` del proyecto de diseño. Los tokens
 * provisionales que había aquí durante el andamiaje se sustituyeron por estos
 * el 13/08/2026, cuando el diseño quedó cerrado.
 *
 * Ningún componente hardcodea color ni tipografía: todo consume estas
 * custom properties.
 */

:root {
	/* =====================================================
	 * COLOR — paleta del Brand Book
	 * ===================================================== */

	--tbl-teal:  #68C4CC;   /* Aqua primario · frescura */
	--tbl-pink:  #F1C6C8;   /* Rosa pastel · ternura, cuidado */
	--tbl-black: #000000;
	--tbl-white: #FFFFFF;

	/* Escala aqua */
	--teal-50:  #F1FAFB;
	--teal-100: #DEF3F5;
	--teal-200: #BDE7EA;
	--teal-300: #97D8DD;
	--teal-400: #68C4CC;   /* = --tbl-teal */
	--teal-500: #4FB1BA;
	--teal-600: #3C97A0;
	--teal-700: #2F757C;
	--teal-800: #265F65;
	--teal-900: #1B454A;

	/* Escala rosa */
	--pink-50:  #FDF6F6;
	--pink-100: #FAEBEC;
	--pink-200: #F6D8D9;
	--pink-300: #F1C6C8;   /* = --tbl-pink */
	--pink-400: #E6A8AB;
	--pink-500: #D88589;
	--pink-600: #B96367;
	--pink-700: #8E4A4D;

	/* Neutros cálidos, tirando a papel */
	--ink-900:    #1D1D1F;
	--ink-700:    #3A3A3D;
	--ink-500:    #6B6B70;
	--ink-400:    #9A9A9F;
	--ink-300:    #C8C8CC;
	--ink-200:    #E5E5E8;
	--ink-100:    #F1F1F3;
	--ink-50:     #F7F7F8;
	--paper:      #FDFCFA;   /* lienzo, ligeramente cálido */
	--paper-warm: #F8F4ED;   /* fondo de sección suave */

	/* Semánticos */
	--color-bg:            var(--paper);
	--color-bg-subtle:     var(--paper-warm);
	--color-bg-card:       var(--tbl-white);
	--color-fg:            var(--ink-900);
	--color-fg-muted:      var(--ink-500);
	--color-fg-subtle:     var(--ink-400);
	--color-fg-inverse:    var(--tbl-white);
	--color-border:        var(--ink-200);
	--color-border-strong: var(--ink-300);
	--color-accent:        var(--tbl-teal);
	--color-accent-strong: var(--teal-600);
	--color-accent-soft:   var(--teal-100);
	--color-accent-2:      var(--tbl-pink);
	--color-accent-2-soft: var(--pink-100);
	--color-link:          var(--teal-700);
	--color-link-hover:    var(--teal-800);
	--color-success:       #4F9D6E;
	--color-danger:        #C2615E;
	--color-overlay:       rgba(29, 29, 31, 0.55);

	/* Verde de WhatsApp: es color de marca ajena, no de la paleta */
	--wa-green:       #25a566;
	--wa-green-hover: #1f8f58;

	/* =====================================================
	 * TIPOGRAFÍA — servida en local (ver fonts.css)
	 * ===================================================== */
	--font-script:  'Kaushan Script', 'Sacramento', cursive;              /* firma, palabras destacadas */
	--font-display: 'Abril Fatface', 'Playfair Display', Georgia, serif;  /* titulares */
	--font-sans:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--fw-light:   300;
	--fw-regular: 400;
	--fw-medium:  500;
	--fw-bold:    700;

	--fs-3xs:  11px;
	--fs-2xs:  12px;
	--fs-xs:   13px;
	--fs-sm:   14px;
	--fs-base: 16px;
	--fs-md:   18px;
	--fs-lg:   22px;
	--fs-xl:   28px;
	--fs-2xl:  36px;
	--fs-3xl:  48px;
	--fs-4xl:  64px;
	--fs-5xl:  88px;
	--fs-6xl: 120px;

	--lh-tight:   1.1;
	--lh-snug:    1.25;
	--lh-base:    1.55;
	--lh-relaxed: 1.7;

	--ls-tight:   -0.01em;
	--ls-normal:  0;
	--ls-wide:    0.06em;
	--ls-eyebrow: 0.22em;

	/* =====================================================
	 * ESPACIADO — base 4px
	 * ===================================================== */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-8:  32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	/* =====================================================
	 * RADIOS
	 * ===================================================== */
	--radius-xs:   2px;
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   14px;
	--radius-xl:   24px;
	--radius-2xl:  36px;
	--radius-pill: 999px;

	/* =====================================================
	 * SOMBRAS
	 * ===================================================== */
	--shadow-xs:   0 1px 2px rgba(29, 29, 31, 0.04);
	--shadow-sm:   0 2px 6px rgba(29, 29, 31, 0.05);
	--shadow-md:   0 8px 24px rgba(29, 29, 31, 0.08);
	--shadow-lg:   0 18px 48px rgba(29, 29, 31, 0.10);
	--shadow-xl:   0 32px 80px rgba(29, 29, 31, 0.14);
	--shadow-halo: 0 24px 60px -20px rgba(104, 196, 204, 0.35);

	/* =====================================================
	 * MOVIMIENTO
	 * ===================================================== */
	--ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
	--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 160ms;
	--dur-base: 240ms;
	--dur-slow: 400ms;
	--dur-page: 600ms;

	/* =====================================================
	 * LAYOUT
	 * ===================================================== */
	--container-narrow: 680px;
	--container:       1100px;
	--container-wide:  1320px;
	--maxw:            1440px;
	--gutter:            64px;
}

@media (max-width: 1024px) {
	:root { --gutter: 32px; }
}