/* ============================================================
   Hikvision LATAM How-To Hub — Design Tokens
   Dirección: Technical Knowledge Hub. Neutro, denso, editorial.
   Gilroy como tipografía. El rojo Hikvision es un acento
   escaso, reservado para estados activos puntuales.
   ============================================================ */

:root {
  /* ---- Color: superficie ---- */
  --background: #ffffff;
  --surface: #f7f7f5;
  --surface-secondary: #f1f1ee;
  --surface-hover: #efefec;

  --border: #e7e7e3;
  --border-strong: #d6d6d1;

  /* ---- Color: texto ---- */
  --text: #171716;
  --text-secondary: #686864;
  --text-tertiary: #969690;

  /* ---- Color: marca (uso escaso e intencional) ---- */
  --hik-red: #d71920;
  --hik-red-ink: #a01319;
  --hik-red-tint: #fbebec;
  --hik-red-rgb: 215, 25, 32;

  /* ---- Fondo del hero: textura de puntos técnica ---- */
  --aura-backdrop: var(--surface);
  --aura-dot: rgba(23, 23, 22, 0.08);

  /* ---- Acentos por sistema — un único punto de color, nunca fondo ---- */
  --sys-cctv-ink: #3872b8;
  --sys-acceso-ink: #7c5cd6;
  --sys-alarmas-ink: #b8730f;
  --sys-videoportero-ink: #1f9370;
  --sys-display-ink: #c14a75;
  --sys-software-ink: #4a9650;
  --sys-networking-ink: #2489ac;
  --sys-fire-ink: #c24631;
  --sys-termica-ink: #c1691f;
  --sys-portable-ink: #838c24;
  --sys-entrance-ink: #5a6f8a;
  --sys-led-ink: #ab8a0c;
  --sys-security-ink: #626d76;
  --sys-elearning-ink: #4665bd;
  --sys-industria-ink: #96652f;
  --sys-default-ink: #78756c;

  /* ---- Tipografía — Gilroy, jerarquía moderada de peso ----
     cdnfonts publica cada peso de Gilroy como familia separada. */
  --font-regular: "Gilroy-Regular", "Gilroy Fallback", "Helvetica Neue", sans-serif;
  --font-medium: "Gilroy-Medium", "Gilroy Fallback", "Helvetica Neue", sans-serif;
  --font-bold: "Gilroy-Bold", "Gilroy Fallback", "Helvetica Neue", sans-serif;
  --font-heavy: "Gilroy-Heavy", "Gilroy Fallback", "Helvetica Neue", sans-serif;
  --font-display: var(--font-regular);
  --font-mono: "JetBrains Mono", ui-monospace, "Consolas", monospace;

  --fs-hero: clamp(2rem, 3.6vw, 3.5rem);
  --fs-h2: clamp(1.35rem, 2vw, 1.75rem);
  --fs-h3: 1.0625rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;
  --fs-nano: 0.6875rem;

  /* ---- Espaciado — ritmo denso, propio de herramienta ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.875rem;
  --space-4: 1.25rem;
  --space-5: 1.75rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --space-8: 5.5rem;

  /* ---- Radios — contenidos, no genéricamente redondeados ---- */
  --radius-btn: 8px;
  --radius-input: 10px;
  --radius-card: 11px;
  --radius-thumb: 8px;
  --radius-pill: 999px;

  /* ---- Sombras — casi imperceptibles ---- */
  --shadow-card: 0 1px 2px rgba(23, 23, 22, 0.03);
  --shadow-card-hover: 0 8px 20px -12px rgba(23, 23, 22, 0.16), 0 2px 6px rgba(23, 23, 22, 0.05);
  --shadow-pop: 0 12px 32px -12px rgba(23, 23, 22, 0.18);

  /* ---- Timing — contenido, sin rebote ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 0.15s;
  --dur-med: 0.2s;
  --dur-slow: 0.32s;

  /* ---- Layout ---- */
  --container-max: 1480px;
  --grid-gutter: 24px;
  --sidebar-w: 220px;

  color-scheme: light;
}

/* Fallback métrico para evitar CLS mientras carga Gilroy */
@font-face {
  font-family: "Gilroy Fallback";
  src: local("Arial");
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 104%;
}