/* =========================================================
   ProspectLab21 — Design Tokens
   Colors, Type, Spacing, Radii, Shadows, Motion
   Paleta estricta: blanco, negro, azul. Minimalismo.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- CORE PALETTE ---------- */
  /* Neutrales: blanco puro → negro puro, con grises casi imperceptibles */
  --pl-white:       #FFFFFF;
  --pl-paper:       #FAFAFA;   /* fondo suave, alternativa al blanco */
  --pl-mist:        #F2F2F2;   /* divisores, hover claro */
  --pl-fog:         #E5E5E5;   /* bordes sutiles */
  --pl-steel:       #C2C2C2;   /* deshabilitado, texto terciario */
  --pl-graphite:    #6B6B6B;   /* texto secundario */
  --pl-ink:         #1A1A1A;   /* texto primario (no negro puro para pantalla) */
  --pl-black:       #000000;   /* negro puro — logos, acentos fuertes */

  /* Azul: un solo azul de marca, decisivo, con una escala mínima */
  --pl-blue-50:     #E6EEFF;
  --pl-blue-100:    #C2D4FF;
  --pl-blue-300:    #5C85FF;
  --pl-blue-500:    #0047FF;   /* azul marca — CTA, acentos, enlaces */
  --pl-blue-600:    #0039CC;   /* hover sobre blanco */
  --pl-blue-700:    #002A99;   /* pressed */
  --pl-blue-900:    #001255;   /* fondos muy oscuros con tinte azul */

  /* ---------- SEMANTIC: LIGHT (default) ---------- */
  --bg:             var(--pl-white);
  --bg-elevated:    var(--pl-white);
  --bg-subtle:      var(--pl-paper);
  --bg-muted:       var(--pl-mist);

  --fg:             var(--pl-ink);
  --fg-secondary:   var(--pl-graphite);
  --fg-tertiary:    var(--pl-steel);
  --fg-inverse:     var(--pl-white);

  --border:         var(--pl-fog);
  --border-strong:  var(--pl-ink);
  --border-subtle:  var(--pl-mist);

  --accent:         var(--pl-blue-500);
  --accent-hover:   var(--pl-blue-600);
  --accent-pressed: var(--pl-blue-700);
  --accent-soft:    var(--pl-blue-50);
  --accent-fg:      var(--pl-white);

  /* Estados semánticos — mantenemos la paleta. Solo usamos azul + negro. */
  --focus-ring:     var(--pl-blue-500);

  /* ---------- TYPOGRAPHY ---------- */
  /* Display / UI: Space Grotesk — geometría moderna, letter-forms neutras */
  /* Body: Inter — legible, profesional B2B */
  /* Mono: JetBrains Mono — para datos, métricas, código */
  --font-display:   "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:      "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Escala tipográfica — ratio 1.25 (Major Third), desktop */
  --fs-12: 0.75rem;    /* 12px — micro, captions */
  --fs-14: 0.875rem;   /* 14px — small body, meta */
  --fs-16: 1rem;       /* 16px — body base */
  --fs-18: 1.125rem;   /* 18px — lead / large body */
  --fs-20: 1.25rem;    /* 20px — h5 */
  --fs-24: 1.5rem;     /* 24px — h4 */
  --fs-30: 1.875rem;   /* 30px — h3 */
  --fs-40: 2.5rem;     /* 40px — h2 */
  --fs-56: 3.5rem;     /* 56px — h1 */
  --fs-80: 5rem;       /* 80px — display / hero */
  --fs-112:7rem;       /* 112px — hero oversized */

  /* Line-heights: apretados para display, amplios para body */
  --lh-display:     1.02;
  --lh-heading:     1.12;
  --lh-body:        1.55;
  --lh-ui:          1.35;

  /* Letter-spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.12em;  /* para etiquetas en MAYÚSCULAS */

  /* Pesos */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  /* ---------- SPACING (4px base) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* ---------- RADII — mínimos. Minimalismo = ángulos limpios ---------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---------- BORDERS ---------- */
  --bw-1: 1px;
  --bw-2: 2px;

  /* ---------- SHADOWS — sutiles. Preferimos bordes. ---------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.08);
  --shadow-focus: 0 0 0 3px rgba(29,78,216,0.25);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.2, 0, 0.2, 1.2);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;

  /* ---------- LAYOUT ---------- */
  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1440px;
  --gutter:        24px;
}

/* ---------- DARK MODE (opcional — misma paleta, invertida) ---------- */
:root.dark, [data-theme="dark"] {
  --bg:             var(--pl-black);
  --bg-elevated:    #0A0A0A;
  --bg-subtle:      #0F0F0F;
  --bg-muted:       #1A1A1A;

  --fg:             var(--pl-white);
  --fg-secondary:   #A3A3A3;
  --fg-tertiary:    #6B6B6B;
  --fg-inverse:     var(--pl-ink);

  --border:         #2A2A2A;
  --border-strong:  var(--pl-white);
  --border-subtle:  #1A1A1A;

  --accent:         var(--pl-blue-300);
  --accent-hover:   var(--pl-blue-100);
  --accent-pressed: var(--pl-blue-500);
  --accent-soft:    rgba(29,78,216,0.18);
  --accent-fg:      var(--pl-black);
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Úsalas en clases o directamente por elemento.
   ========================================================= */

html { font-family: var(--font-body); color: var(--fg); background: var(--bg); }
body { font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-body); color: var(--fg); }

/* Headings — siempre Display, peso 600-700, tracking ajustado */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-56), 8vw, var(--fs-112));
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-56);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-40);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-30);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-heading);
  color: var(--fg);
}

h5, .h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-20);
  line-height: var(--lh-heading);
  color: var(--fg);
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: var(--lh-body);
  color: var(--fg-secondary);
  font-weight: var(--fw-regular);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg);
}

.p-small {
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--fg-secondary);
}

.caption {
  font-size: var(--fs-12);
  line-height: var(--lh-ui);
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-wide);
}

/* Eyebrow / kicker — etiqueta en MAYÚSCULAS sobre títulos */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

/* Mono — métricas, datos, tracking-numbers */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
}

/* Links */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
a:hover { border-bottom-color: var(--accent); }

/* Selección */
::selection { background: var(--pl-ink); color: var(--pl-white); }

/* Utilidades */
.u-mono { font-family: var(--font-mono); }
.u-display { font-family: var(--font-display); }
.u-tnum { font-variant-numeric: tabular-nums; }
.u-fg { color: var(--fg); }
.u-fg-secondary { color: var(--fg-secondary); }
.u-fg-tertiary { color: var(--fg-tertiary); }
.u-accent { color: var(--accent); }