/* =============================================================
   KAIROS — DESIGN TOKENS  (v0.1 · PLACEHOLDER · hot-swap s3)
   =============================================================
   Sistema OKLCH parametrizado. Derivado de los 3 stops del logo
   nuevo (marca/kairos-logo-2026.svg):
     · #657b9e  azul pizarra   → primario
     · #80c2c1  teal/menta     → secundario
     · #2d8f8c  teal profundo  → acento
   Dirección: salud azul/teal, blanco dominante, sobrio y limpio.

   ⚠️ PLACEHOLDER: los valores OKLCH son una primera aproximación.
   El sistema completo (escalas 50–900, contraste WCAG AA verificado,
   estados) se deriva en sesión 3 cuando Carla confirme los hex finales.
   Para hot-swap: cambiar SOLO los "anchors" (hue/chroma/L de marca);
   el resto de la escala se recalcula desde esas variables.
   ============================================================= */

:root {
	/* --- ANCHORS DE MARCA (único punto de edición para el hot-swap) --- */
	--brand-primary-h: 253;    /* azul pizarra */
	--brand-primary-c: 0.055;
	--brand-primary-l: 0.56;

	--brand-secondary-h: 190;  /* teal/menta */
	--brand-secondary-c: 0.055;
	--brand-secondary-l: 0.76;

	--brand-accent-h: 190;     /* teal profundo */
	--brand-accent-c: 0.085;
	--brand-accent-l: 0.57;

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

	/* --- 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.48 var(--brand-primary-c) var(--brand-primary-h));
	--color-primary-700: oklch(0.40 var(--brand-primary-c) var(--brand-primary-h));
	--color-primary-050: oklch(0.96 0.015 var(--brand-primary-h));

	--color-secondary: oklch(var(--brand-secondary-l) var(--brand-secondary-c) var(--brand-secondary-h));
	--color-secondary-050: oklch(0.97 0.02 var(--brand-secondary-h));

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

	/* --- NEUTROS (levemente tintados hacia el azul de marca) --- */
	--color-ink: oklch(0.25 0.02 253);        /* texto principal */
	--color-ink-soft: oklch(0.44 0.02 253);   /* texto secundario */
	--color-line: oklch(0.90 0.008 253);      /* bordes / divisores */
	--color-surface: oklch(0.985 0.004 253);  /* fondo de sección alt */
	--color-bg: oklch(1 0 0);                 /* blanco dominante */
	--color-white: #fff;

	/* --- 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);
	--color-whatsapp: #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);
	--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) */
	--fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 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 hacia el azul de marca) --- */
	--shadow-xs: 0 1px 2px oklch(0.40 0.04 253 / 0.06);
	--shadow-sm: 0 2px 8px oklch(0.40 0.05 253 / 0.07);
	--shadow: 0 8px 24px oklch(0.40 0.06 253 / 0.10);
	--shadow-lg: 0 18px 48px oklch(0.40 0.07 253 / 0.14);
	--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 253) 0%, oklch(0.62 0.075 200) 100%);
	--grad-surface: linear-gradient(180deg, var(--color-primary-050) 0%, var(--color-bg) 60%);
	--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: 72px;
}

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