/* =============================================================================
   3R PRODUCCIONES · tokens.css
   Sistema visual. Sale del manual de marca.

   La regla: el fondo es negro, el azul construye, el lima acciona.
   El lima nunca pasa del 5% de la superficie salvo en la franja de cierre.
   ============================================================================= */

:root{

  /* ---- COLOR ------------------------------------------------------------ */
  /* Manual de marca */
  --negro:        #000000;
  --gris-marca:   #282828;
  --azul:         #345DA8;   /* estructura y sistema */
  --lima:         #B5CD02;   /* acción, y solo acción */

  /* Superficies derivadas. Neutros con sesgo azul, nunca grises puros:
     es lo que hace que se lea como un sistema y no como plantilla. */
  --ground:       #050608;
  --ground-2:     #0A0B0D;
  --panel:        #101318;
  --panel-2:      #161A20;
  --panel-3:      #1D2229;

  --line:         #242932;
  --line-soft:    #171B22;
  --line-lit:     #333B47;

  /* Tinta */
  --ink:          #EDEFF2;
  --ink-2:        #A9B1BD;
  --muted:        #6E7683;
  --muted-2:      #4A515C;

  /* Variantes de marca */
  --azul-lit:     #6E96D8;
  --azul-deep:    #1B2E52;
  --azul-glow:    rgba(52, 93, 168, .35);
  --lima-dim:     #7E8F09;
  --lima-deep:    #2A3009;
  --lima-glow:    rgba(181, 205, 2, .18);

  --alerta:       #E0533C;

  /* ---- TIPOGRAFÍA ------------------------------------------------------- */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Escala fluida */
  --t--2: 0.70rem;
  --t--1: 0.82rem;
  --t-0:  1.00rem;
  --t-1:  clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --t-2:  clamp(1.35rem, 1.20rem + 0.75vw, 1.75rem);
  --t-3:  clamp(1.85rem, 1.55rem + 1.5vw,  2.60rem);
  --t-4:  clamp(2.40rem, 1.80rem + 3.0vw,  4.20rem);
  --t-5:  clamp(3.00rem, 1.90rem + 5.5vw,  6.80rem);
  --t-6:  clamp(3.60rem, 1.60rem + 9.0vw, 10.00rem);

  /* ---- RITMO Y FORMA ---------------------------------------------------- */
  --gut:      clamp(20px, 4vw, 40px);
  --maxw:     1320px;
  --maxw-txt: 62ch;

  --pad-sec:  clamp(72px, 11vh, 140px);
  --r-sm:     4px;
  --r-md:     10px;
  --r-lg:     18px;
  --r-panel:  clamp(20px, 4vw, 40px);   /* el panel que sube (WMF) */

  /* ---- MOVIMIENTO ------------------------------------------------------- */
  /* Easing suave siempre. Lineal se ve barato. */
  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --e-io:   cubic-bezier(.65, 0, .35, 1);
  --d-fast: .22s;
  --d-mid:  .45s;
  --d-slow: .9s;

  /* Alturas de UI */
  --nav-h: 58px;
}

/* Tipos de datos: los números tienen que alinearse siempre. */
.num, td.num, .tabular { font-variant-numeric: tabular-nums; }