/* ============================================================
   tokens.css — Sistema de diseño de K App (fuente única de verdad).
   ------------------------------------------------------------
   Todas las variables de diseño viven aquí. NINGÚN archivo debe
   escribir colores/espaciados a mano: usa var(--...).
   Orden de carga: vendor/theme.css → tokens.css → demo-modern.css
                   → panel_extras.css → kapp.css → pages/*.css
   Plan: al migrar fuera del template, esta paleta se conserva.
   ============================================================ */
:root {
  /* ── Marca / colores ─────────────────────────────────────── */
  --topbar-bg:     #1a2540;   /* barra superior (skin1) */
  --accent:        #009efb;   /* azul principal: botones, links, activos */
  --accent-dark:   #0077c2;
  --vf-red:        #e61919;   /* rojo institucional Viktor Frankl */

  /* ── Estados ─────────────────────────────────────────────── */
  --success:       #2dc653;
  --warning:       #f7b731;
  --danger:        #e63946;

  /* ── Texto ───────────────────────────────────────────────── */
  --text:          #1a2540;   /* texto principal */
  --text-muted:    #888888;   /* texto secundario */
  --text-faint:    #aaaaaa;   /* labels tenues */

  /* ── Superficies / bordes ────────────────────────────────── */
  --bg-page:       #f8f9fa;   /* fondo de página */
  --card-bg:       #ffffff;
  --border-soft:   #e0e5ec;
  --border-softer: #f0f2f5;

  /* ── Tipografía ──────────────────────────────────────────── */
  --sans:          'Geist', -apple-system, 'Segoe UI', sans-serif;
  --mono:          'JetBrains Mono', monospace;  /* códigos, labels técnicos */
  --fs-body:       14px;
  --fs-title:      22px;

  /* ── Radios ──────────────────────────────────────────────── */
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     18px;

  /* ── Sombras ─────────────────────────────────────────────── */
  --shadow-soft:   0 4px 24px rgba(0, 158, 251, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-card:   0 2px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.05);

  /* ── Escala de espaciado (4px base) ──────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
}