/**
 * Forgekloud — tokens de diseño.
 *
 * Este archivo SÓLO declara custom properties. Ningún selector de elemento,
 * ninguna regla visual. Si hace falta un color nuevo, se añade aquí; nunca se
 * escribe un hex suelto en el resto del CSS.
 */

:root {
  /* ======================================================== superficies ==
     Rampa neutra ligeramente cálida. Ni azulada ni verdosa: es lo que separa
     la identidad de Forgekloud de las referencias del sector. */
  --fk-void: #0a0b0d; /* fondo de página */
  --fk-base: #0f1114; /* secciones alternas */
  --fk-surface: #15181c; /* tarjetas */
  --fk-raised: #1c2026; /* hover, popovers, bloques de código */
  --fk-line: #262b32; /* bordes */
  --fk-line-strong: #343a42; /* bordes en hover/focus */

  /* ============================================================== texto ==
     Contrastes medidos sobre --fk-void. */
  --fk-text: #e9ecef; /* 15.8:1 */
  --fk-muted: #98a1ab; /*  7.2:1 */
  --fk-dim: #6a737d; /*  4.0:1 — sólo ≥18px o decorativo */

  /* ============================================================ acentos ==
     Un primario cálido (la forja) y un frío reservado a datos. */
  --fk-ember: #ff7a2d; /* 7.2:1 — CTAs, enlaces, énfasis */
  --fk-ember-deep: #c24b12; /* gradientes y bordes de énfasis */
  --fk-spark: #ffc24b; /* acento cálido secundario */
  --fk-plasma: #35d6c4; /* 10.5:1 — métricas, kickers, mono */

  /* ============================================================= estado ==
     Sólo significan estado. Nunca decoración. */
  --fk-ok: #3ecf8e;
  --fk-warn: #f2b441;
  --fk-crit: #f05561;
  --fk-info: #5b9df9;

  /* ========================================================= tipografía == */
  --fk-font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --fk-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fk-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Escala fluida — ratio ≈1.25 móvil / 1.333 desktop.
     Los MÍNIMOS están calculados para 320px de ancho: a ese tamaño el
     contenedor deja 288px útiles, y una palabra larga en español
     ("Infraestructura", 15 caracteres) ocupa ≈0,55em por carácter. Por eso
     step-5 no puede bajar de ~2,15rem: con el mínimo anterior (3,05rem) el
     titular pedía ~400px y desbordaba la pantalla. Los máximos no cambian. */
  --fk-step--1: clamp(0.79rem, 0.77rem + 0.1vw, 0.84rem);
  --fk-step-0: clamp(1rem, 0.96rem + 0.18vw, 1.06rem);
  --fk-step-1: clamp(1.15rem, 1.09rem + 0.31vw, 1.41rem);
  --fk-step-2: clamp(1.38rem, 1.26rem + 0.6vw, 1.88rem);
  --fk-step-3: clamp(1.65rem, 1.45rem + 1vw, 2.5rem);
  --fk-step-4: clamp(1.95rem, 1.66rem + 1.45vw, 3.33rem);
  --fk-step-5: clamp(2.15rem, 1.63rem + 2.6vw, 4.44rem);

  --fk-leading-tight: 1.15;
  --fk-leading-snug: 1.35;
  --fk-leading-body: 1.65;

  /* ========================================================== espaciado == */
  --fk-space-3xs: 0.25rem;
  --fk-space-2xs: 0.5rem;
  --fk-space-xs: 0.75rem;
  --fk-space-s: 1rem;
  --fk-space-m: 1.5rem;
  --fk-space-l: 2rem;
  --fk-space-xl: 3rem;
  --fk-space-2xl: 4.5rem;
  --fk-space-3xl: 7rem;

  /* ============================================================= formas ==
     Radios cortos: un radio grande se lee blando y genérico. */
  --fk-radius-xs: 3px;
  --fk-radius-s: 6px;
  --fk-radius-m: 10px;
  --fk-radius-pill: 999px;

  --fk-border: 1px solid var(--fk-line);
  --fk-border-strong: 1px solid var(--fk-line-strong);

  /* ============================================================== capas == */
  --fk-z-header: 100;
  --fk-z-nav: 200;

  /* ========================================================== movimiento ==
     Corto y con curva estándar. Nada de rebotes. */
  --fk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fk-fast: 150ms;
  --fk-normal: 220ms;

  /* ============================================================= layout == */
  --fk-container: 1200px;
  --fk-container-narrow: 760px;
  --fk-gutter: clamp(1rem, 4vw, 2rem);

  /* Glow de foco/énfasis derivado del acento, para no fijar un rgba suelto. */
  --fk-glow-ember: 0 0 0 3px color-mix(in oklab, var(--fk-ember) 28%, transparent);
  --fk-glow-plasma: 0 0 0 3px color-mix(in oklab, var(--fk-plasma) 25%, transparent);
}