/* ============================================================
   css/biblioteca/tokens.css · la paleta de la Biblioteca Insight
   ────────────────────────────────────────────────────────────
   ÚNICA fuente de los colores, tipografías y medidas (Tanda 9,
   2026-09). Antes vivían en el <style> de _layout.php y repetidos a
   mano en _404.php y _estado-info.php: un cambio de color de marca
   dejaba a esas dos páginas con el viejo sin que nadie lo notara.

   La enlazan _layout.php (todas las secciones), _404.php y
   _estado-info.php. Los alias del contrato de apuntes/ (--accent,
   --card, --text-2…) NO van acá: los usa solo el control de usuario
   del layout y viven al principio de biblioteca.css.

   El .htaccess raíz cachea los .css un año: quien la enlaza le pone
   ?v=<fecha del archivo>, así que alcanza con subirla.
   ============================================================ */

/* ============================================================
   VARIABLES GLOBALES — SISTEMA DE DISEÑO INSIGHT BIBLIOTECA
============================================================ */
:root {
  /* Colores base */
  --bg:            #0a0c1e;
  --bg-elevated:   #0e1030;
  --bg-card:       #0e1030;
  --bg-card2:      #141840;
  --border:        #1e2250;
  --border-strong: rgba(255,255,255,0.12);
  --border-hover:  rgba(245,144,29,0.4);

  /* Marca */
  --gold:          #F0A500;
  --gold-light:    #F7C948;
  --gold-soft:     rgba(240,165,0,0.08);
  --blue:          #1A2DB8;
  --blue-bright:   #2640D4;

  /* Estados */
  --green:         #34d399;
  --green-soft:    rgba(52,211,153,0.12);

  /* Textos */
  --text:          #ffffff;
  --text-soft:     #c8c8da;
  --text-muted:    #9090a8;
  --text-dim:      #8a8aa5;   /* 5,5:1 sobre el fondo; antes #6b6b85, 3,6:1 (Tanda 7) */

  /* Tipografías */
  --font-titulo:   'Playfair Display', Georgia, serif;
  --font-cuerpo:   'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:     'DM Mono', 'SF Mono', Menlo, monospace;

  /* Layout */
  --navbar-h:      64px;
  --radius:        16px;
  --radius-sm:     12px;
  --radius-xs:     8px;
  --sombra:        0 4px 24px rgba(9,36,153,0.18);
  --sombra-strong: 0 12px 40px rgba(0,0,0,0.4);

  /* Safe areas (iPhone con notch) */
  --safe-top:      env(safe-area-inset-top, 0px);
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
  --safe-left:     env(safe-area-inset-left, 0px);
  --safe-right:    env(safe-area-inset-right, 0px);

  /* Easings */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Navbar más bajo en mobile chico */
@media (max-width: 480px) {
  :root { --navbar-h: 58px; }
}