/* ============================================
   DESIGN TOKENS — Laboratorio Carvajal
   Sistema high-tech dark · variables CSS globales
   ============================================ */

:root {
  /* ──────────────── COLOR ──────────────── */
  /* Fondos — navy profundo, precisión científica (sistema base · NAV) */
  --color-bg:           #0A0E1A;
  --color-bg-soft:      #0E1426;
  --color-bg-elev:      #131B30;
  --color-surface:      rgba(255, 255, 255, 0.04);
  --color-surface-2:    rgba(255, 255, 255, 0.06);

  /* Superficie de página — claro (hero / secciones light) */
  --color-page:         #F6F9FC;
  --color-ink:          #0E1B2E;  /* texto sobre acento cyan */

  /* Acento 1 — cyan eléctrico (salud, high-tech) */
  --color-cyan:         #00D4FF;
  --color-cyan-600:     #16A6C9;
  --color-cyan-300:     #7DE7FF;
  --color-cyan-glow:    rgba(0, 212, 255, 0.45);

  /* Acento 2 — violeta (innovación, biotec) */
  --color-violet:       #7B2FBE;
  --color-violet-400:   #A55FE0;
  --color-violet-glow:  rgba(123, 47, 190, 0.40);

  /* Neutros texto */
  --color-text:         #E8EDF5;
  --color-text-soft:    #B4BECB;
  --color-text-muted:   #8A94A8;
  --color-border:       rgba(255, 255, 255, 0.10);
  --color-border-soft:  rgba(255, 255, 255, 0.06);

  /* Sistema */
  --color-success:      #2DD4A7;
  --color-error:        #F25F5C;
  --color-whatsapp:     #25D366;
  --color-whatsapp-dark:#1FA855;

  /* ──────────────── TYPOGRAPHY ──────────────── */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Escala fluida con clamp — perf > media queries */
  --fs-display-xl: clamp(2.5rem, 5.5vw + 0.5rem, 5rem);     /* H1 hero */
  --fs-display-l:  clamp(2rem, 4vw + 0.5rem, 3.25rem);      /* H2 */
  --fs-display-m:  clamp(1.4rem, 2.5vw + 0.5rem, 2.1rem);   /* H3 */
  --fs-display-s:  clamp(1.2rem, 1.5vw + 0.5rem, 1.5rem);   /* H4 */

  --fs-body-xl:    clamp(1.125rem, 0.5vw + 1rem, 1.375rem); /* lead destacado */
  --fs-body-l:     clamp(1rem, 0.25vw + 0.95rem, 1.125rem); /* lead */
  --fs-body-m:     1rem;       /* 16px default */
  --fs-body-s:     0.875rem;   /* 14px */
  --fs-body-xs:    0.75rem;    /* 12px microcopia */

  /* Pesos / line-heights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  --ls-tight:    -0.03em;
  --ls-normal:    0;
  --ls-wide:      0.06em;
  --ls-wider:     0.14em;

  /* ──────────────── SPACING ──────────────── */
  --space-3xs:  0.125rem;
  --space-2xs:  0.25rem;
  --space-xs:   0.5rem;
  --space-s:    0.75rem;
  --space-m:    1rem;
  --space-l:    1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4.5rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  --space-section: clamp(4rem, 8vw, 8rem);
  --space-gutter:  clamp(1rem, 3vw, 2rem);

  /* ──────────────── LAYOUT ──────────────── */
  --container-max:    1320px;
  --container-narrow: 800px;
  --container-prose:  680px;

  /* ──────────────── BORDER / RADII ──────────────── */
  --radius-sharp:   4px;
  --radius-soft:    8px;
  --radius-card:    16px;
  --radius-lg:      24px;
  --radius-pill:    9999px;

  /* ──────────────── SHADOWS / GLOW ──────────────── */
  --shadow-s:     0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-m:     0 8px 28px rgba(0, 0, 0, 0.38);
  --shadow-l:     0 24px 60px rgba(0, 0, 0, 0.50);
  --glow-cyan:    0 0 32px var(--color-cyan-glow);
  --glow-violet:  0 0 32px var(--color-violet-glow);

  /* ──────────────── MOTION ──────────────── */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-organic:    cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:    150ms;
  --dur-mid:     300ms;
  --dur-slow:    600ms;
  --dur-slower:  900ms;
  --dur-cinema:  1400ms;

  /* ──────────────── Z-INDEX ──────────────── */
  --z-base:      0;
  --z-content:   10;
  --z-sticky:    100;
  --z-nav:       200;
  --z-fab:       300;
  --z-modal:     400;

  /* ──────────────── BACKDROP / EFFECTS ──────────────── */
  --backdrop-nav:    saturate(160%) blur(22px);
}