/* =============================================================
   KAIROS — DESIGN TOKENS  (v0.1 · PLACEHOLDER · hot-swap s3)
   =============================================================
   Sistema OKLCH parametrizado. Derivado del logo + hex confirmados
   por el cliente (Carla, s3):
     · #657b9e  azul pizarra   → primario
     · #80c2c1  teal/menta     → secundario
     · #2d8f8c  teal profundo  → acento (interno del logo)
     · #f3eeea  crema cálido   → base/fondo dominante (confirmado s3)
   Dirección: salud azul/teal sobre BASE CREMA CÁLIDA (no blanco clínico).
   La fotografía de marca (retratos del equipo) está tomada sobre este
   mismo crema → el sitio y las fotos comparten el mismo fondo.

   Valores OKLCH derivados de los hex reales (sRGB→OKLab). Escalas
   50–900 + estados finos pendientes; base cromática ya confirmada.
   Para hot-swap: cambiar SOLO los "anchors"; el resto se recalcula.
   ============================================================= */

:root {
	/* --- ANCHORS DE MARCA (único punto de edición para el hot-swap) --- */
	--brand-primary-h: 259;    /* azul pizarra #657b9e */
	--brand-primary-c: 0.060;
	--brand-primary-l: 0.579;

	--brand-secondary-h: 195;  /* teal/menta #80c2c1 */
	--brand-secondary-c: 0.067;
	--brand-secondary-l: 0.77;

	--brand-accent-h: 192;     /* teal profundo #2d8f8c */
	--brand-accent-c: 0.089;
	--brand-accent-l: 0.594;

	--brand-cream-h: 62;       /* crema cálido #f3eeea (base) */
	--brand-cream-c: 0.008;

	/* Fallbacks hex exactos (por si el navegador no soporta oklch) */
	--brand-primary-hex: #657b9e;
	--brand-secondary-hex: #80c2c1;
	--brand-accent-hex: #2d8f8c;
	--brand-cream-hex: #f3eeea;

	/* --- COLORES PRIMITIVOS (derivados de los anchors) --- */
	--color-primary: oklch(var(--brand-primary-l) var(--brand-primary-c) var(--brand-primary-h));
	--color-primary-600: oklch(0.49 var(--brand-primary-c) var(--brand-primary-h));
	--color-primary-700: oklch(0.41 0.055 var(--brand-primary-h));
	--color-primary-050: oklch(0.955 0.018 var(--brand-primary-h));

	--color-secondary: oklch(var(--brand-secondary-l) var(--brand-secondary-c) var(--brand-secondary-h));
	--color-secondary-050: oklch(0.965 0.022 var(--brand-secondary-h));

	--color-accent: oklch(var(--brand-accent-l) var(--brand-accent-c) var(--brand-accent-h));
	--color-accent-600: oklch(0.50 var(--brand-accent-c) var(--brand-accent-h));

	/* --- NEUTROS (superficies CÁLIDAS crema; texto navy de marca) ---
	   ESCALERA DE FONDOS (s4): el paso bg→surface tiene que VERSE. Antes eran
	   0.968 vs 0.945 (2%) → todo el sitio se leía "cremita" y sin aire. Ahora
	   bg ≈ blanco cálido (0.988) y surface = el crema de marca (0.945). */
	--color-ink: oklch(0.26 0.021 259);       /* navy-ink: texto principal */
	--color-ink-soft: oklch(0.46 0.020 259);  /* texto secundario */
	--color-line: oklch(0.895 0.006 var(--brand-cream-h));   /* bordes cálidos */
	--color-surface: oklch(0.945 0.009 var(--brand-cream-h));/* #f3eeea — sección alt */
	--color-cream: oklch(0.945 0.009 var(--brand-cream-h));  /* crema de marca (alias) */
	--color-cream-deep: oklch(0.915 0.011 var(--brand-cream-h)); /* crema más hondo */
	--color-bg: oklch(0.988 0.004 var(--brand-cream-h));     /* blanco cálido dominante */
	--color-white: #fff;                      /* blanco puro: cards elevadas */

	/* --- ESTADOS SEMÁNTICOS --- */
	--color-success: oklch(0.62 0.14 150);
	--color-warning: oklch(0.75 0.15 75);
	--color-error: oklch(0.58 0.19 27);
	/* Verde de WhatsApp en dos tonos. El de marca (#25d366) sobre texto blanco da
	   1.98:1 y el CTA de turnos —el botón más importante del sitio— quedaba muy
	   por debajo del 4.5:1 de WCAG AA. `--color-whatsapp` es el que usan los
	   botones: mismo tono, bajado hasta el punto más claro que cumple (4.53:1).
	   El original queda como `--color-whatsapp-brand` para superficies donde no
	   hay texto encima (íconos, tintes). */
	--color-whatsapp: oklch(0.55 0.14 152);
	--color-whatsapp-brand: #25d366;

	/* --- TOKENS SEMÁNTICOS (usar estos en los componentes) --- */
	--text: var(--color-ink);
	--text-muted: var(--color-ink-soft);
	--bg: var(--color-bg);
	--bg-alt: var(--color-surface);
	--bg-tint: var(--color-primary-050);   /* 3er escalón, azulado — usar 1 vez por página */
	--border: var(--color-line);
	--link: var(--color-primary-600);
	--link-hover: var(--color-primary-700);

	/* --- TIPOGRAFÍA (Figtree self-host — humanista cálida, una sola familia) --- */
	--font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-heading: var(--font-sans);

	/* Escala tipográfica fluida (clamp mobile→desktop) */
	/* Fijo en 13px: el clamp por vw lo dejaba en 12.1px a 390px de ancho, o sea
	   el texto de apoyo (chips, badges, eyebrows, notas) se achicaba justo en
	   mobile, que es donde más cuesta leerlo. */
	--fs-xs: 0.8125rem;
	--fs-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
	--fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
	--fs-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
	--fs-2xl: clamp(1.75rem, 1.4rem + 1.7vw, 2.5rem);
	--fs-3xl: clamp(2.25rem, 1.7rem + 2.7vw, 3.5rem);

	--lh-tight: 1.15;
	--lh-snug: 1.3;
	--lh-normal: 1.6;

	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;

	/* --- ESPACIADO (escala base 4px) --- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 2.5rem;
	--space-8: 3rem;
	--space-10: 4rem;
	--space-12: 6rem;

	/* --- LAYOUT --- */
	--wrap-max: 1180px;
	--wrap-narrow: 720px;
	--wrap-pad: clamp(1rem, 4vw, 2rem);

	/* --- RADIOS --- */
	--radius-sm: 6px;
	--radius: 12px;
	--radius-lg: 20px;
	--radius-full: 999px;

	/* --- SOMBRAS (sutiles, tintadas cálidas para asentar sobre crema) --- */
	--shadow-xs: 0 1px 2px oklch(0.38 0.02 55 / 0.07);
	--shadow-sm: 0 2px 10px oklch(0.38 0.03 55 / 0.08);
	--shadow: 0 10px 30px oklch(0.38 0.035 55 / 0.11);
	--shadow-lg: 0 22px 54px oklch(0.35 0.04 55 / 0.16);
	--shadow-teal: 0 12px 32px oklch(0.57 0.085 190 / 0.28);

	/* --- GRADIENTES / AURA (dirección salud azul→teal) --- */
	--grad-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
	--grad-brand-soft: linear-gradient(135deg, oklch(0.62 0.06 259) 0%, oklch(0.62 0.075 200) 100%);
	--grad-surface: linear-gradient(180deg, oklch(0.948 0.012 var(--brand-cream-h)) 0%, var(--color-bg) 78%);
	--aura-teal: radial-gradient(60% 60% at 70% 30%, oklch(0.80 0.07 190 / 0.55) 0%, transparent 70%);
	--aura-blue: radial-gradient(55% 55% at 20% 60%, oklch(0.70 0.06 253 / 0.45) 0%, transparent 70%);

	/* --- MOTION — curvas fuertes (emil), <300ms UI --- */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);      /* general */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);     /* enter/exit, hover — punch */
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* movimiento en pantalla */
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* micro-rebote sutil */
	--dur-fast: 140ms;
	--dur: 220ms;
	--dur-slow: 420ms;

	/* --- CAPAS --- */
	--z-header: 100;
	--z-float: 200;
	--z-nav: 300;

	/* --- HEADER --- */
	--header-h: 78px;
	--logo-h: 50px;   /* alto del logo ya recortado (viewBox al contenido) */
}

/* Respetar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	:root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}