/* ═══════════════════════════════════════════════════════════════
   JUSTNET SYSTEMS · DESIGN TOKENS · v1.0
   ───────────────────────────────────────────────────────────────
   Única fuente de verdad para color, tipografía, espaciado y
   dimensiones de slide de todas las presentaciones.

   REGLA: ningún componente usa valores sueltos. Si necesitas un
   valor nuevo, créalo aquí primero.

   Para personalizar UNA presentación sin tocar este archivo,
   sobrescribe los tokens en un <style> dentro del propio HTML
   (ver bloque "TOKENS DE CLIENTE" en las plantillas).
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── COLOR · MARCA ────────────────────────────────────────────
     El naranja es acento, nunca fondo grande. Para superficies
     teñidas usa --color-primary-subtle. */
  --color-primary:        #ff6702;
  --color-primary-dark:   #d95500;                  /* hover · texto naranja sobre claro */
  --color-primary-light:  #ff8a3d;                  /* acentos sobre fondos oscuros */
  --color-primary-subtle: rgba(255, 103, 2, 0.08);  /* fondos teñidos, filas destacadas */

  --color-secondary:       #2d3748;
  --color-secondary-light: #4a5568;

  /* ── COLOR · SUPERFICIES ─────────────────────────────────────── */
  --color-surface:          #ffffff;
  --color-surface-alt:      #f8f9fa;
  --color-surface-dark:     #1a202c;   /* slides .slide--dark */
  --color-on-surface:       #2d3748;
  --color-on-surface-muted: #717d8d;

  /* ── COLOR · ESCALA NEUTRA (gris azulado, anclada en la marca) ── */
  --color-neutral-50:  #f8f9fa;
  --color-neutral-100: #f0f2f5;
  --color-neutral-200: #e2e6ea;
  --color-neutral-300: #cbd2d9;
  --color-neutral-400: #9aa5b1;
  --color-neutral-500: #717d8d;
  --color-neutral-600: #4a5568;
  --color-neutral-700: #3a4556;
  --color-neutral-800: #2d3748;   /* = --color-secondary */
  --color-neutral-900: #1a202c;

  /* ── COLOR · SEMÁNTICOS (legibles en impresión) ──────────────── */
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger:  #dc2626;
  --color-info:    #1d4ed8;

  /* ── TIPOGRAFÍA · FAMILIAS ────────────────────────────────────
     Display: titulares con carácter. Body: datos y lectura.
     Mono: precios, cantidades, porcentajes, códigos. */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ── TIPOGRAFÍA · ESCALA ──────────────────────────────────────
     px fijos a propósito: el slide es un lienzo fijo 1280×720,
     nada de clamp()/vw que se rompe al imprimir. */
  --text-xs:   11px;   /* footnotes, números de slide, ejes */
  --text-sm:   13px;   /* celdas de tabla, etiquetas de dato */
  --text-base: 15px;   /* cuerpo de texto */
  --text-lg:   18px;   /* destacados, intro */
  --text-xl:   22px;   /* subtítulos de slide */
  --text-2xl:  28px;   /* totales, cifras medianas */
  --text-3xl:  34px;   /* títulos de slide secundarios */
  --text-4xl:  42px;   /* títulos de slide */
  --text-5xl:  48px;   /* títulos de sección / divider */
  --text-display: 76px; /* solo portada y cierre */

  --leading-tight:   1.08;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.14em;   /* kickers / etiquetas uppercase */

  /* ── ESPACIADO · REJILLA BASE 8px ─────────────────────────────
     --space-scale lo controla el panel de configuración
     (multiplicador 0.75–1.25). No lo edites a mano aquí. */
  --space-unit:  8px;
  --space-scale: 1;
  --space-1:  calc(var(--space-unit) * var(--space-scale) * 1);   /*   8px */
  --space-2:  calc(var(--space-unit) * var(--space-scale) * 2);   /*  16px */
  --space-3:  calc(var(--space-unit) * var(--space-scale) * 3);   /*  24px */
  --space-4:  calc(var(--space-unit) * var(--space-scale) * 4);   /*  32px */
  --space-5:  calc(var(--space-unit) * var(--space-scale) * 5);   /*  40px */
  --space-6:  calc(var(--space-unit) * var(--space-scale) * 6);   /*  48px */
  --space-8:  calc(var(--space-unit) * var(--space-scale) * 8);   /*  64px */
  --space-10: calc(var(--space-unit) * var(--space-scale) * 10);  /*  80px */
  --space-12: calc(var(--space-unit) * var(--space-scale) * 12);  /*  96px */
  --space-16: calc(var(--space-unit) * var(--space-scale) * 16);  /* 128px */

  /* ── SLIDE · DIMENSIONES ──────────────────────────────────────
     16:9 fijo. --slide-safe es la zona segura imprimible:
     no se escala con --space-scale a propósito. */
  --slide-width:   1280px;
  --slide-height:  720px;
  --slide-padding: var(--space-6);
  --slide-safe:    48px;

  /* ── LAYOUT ──────────────────────────────────────────────────── */
  --grid-gap:      var(--space-4);
  --grid-2col:     1fr 1fr;
  --grid-3col:     1fr 1fr 1fr;
  --radius:        4px;        /* panel: Recto 0 · Suave 4 · Redondeado 8 */
  --radius-pill:   100px;

  /* ── EFECTOS (solo pantalla; la impresión los ignora) ────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-card:     0 8px 32px rgba(26, 32, 44, 0.10);
}