/* =========================================================
   TOKENS — ToviGamboa · Panel IPTV
   Única fuente de verdad de color / tipografía / espaciado.
   Carga DESPUÉS de style.css para que estos valores ganen.
   No contiene selectores aparte de :root.
========================================================= */

:root {

  /* -------------------------------------------------------
     FONDOS / SUPERFICIES  (azul marino, escalera de elevación)
  ------------------------------------------------------- */
  --bg:          #0b1024;   /* fondo de la app (el más profundo) */
  --bg-elev:     #0e1430;   /* tope del degradado de fondo */
  --rail:        #0f1733;   /* panel izquierdo — apenas se distingue */
  --surface:     #141c3d;   /* tarjeta estándar */
  --surface-2:   #1b2550;   /* input, elemento elevado, hover */
  --surface-3:   #26326a;   /* cabecera de tabla sticky, estado activo */

  /* -------------------------------------------------------
     LÍNEAS
  ------------------------------------------------------- */
  --border:        rgba(126, 160, 240, 0.13);
  --border-soft:   rgba(126, 160, 240, 0.075);
  --border-2:      rgba(126, 160, 240, 0.24);
  --border-brand:  rgba(63, 185, 242, 0.45);

  /* -------------------------------------------------------
     MARCA  (azul → cian — logo del caracol + botón "ENTRAR")
  ------------------------------------------------------- */
  --brand:         #2f6fe0;   /* azul primario: foco, enlaces, activo */
  --brand-deep:    #123fc4;   /* cobalto del logo: bordes profundos, pulsado */
  --brand-bright:  #3fb9f2;   /* extremo celeste del degradado */
  --brand-cyan:    #46d5e0;   /* cian de realce: números, micro-acentos */

  --grad-brand:
    linear-gradient(96deg, #1f5fd8 0%, #3fb9f2 55%, #46d5e0 100%);
  --grad-brand-hover:
    linear-gradient(96deg, #2a6ae4 0%, #52c4f6 55%, #5ce0ea 100%);

  --on-brand:      #04182e;   /* texto oscuro sobre el degradado claro */
  --glow-brand:    0 0 24px rgba(63, 185, 242, 0.18);

  /* -------------------------------------------------------
     TEXTO
  ------------------------------------------------------- */
  --text:    #eaf0ff;
  --text-2:  #9fb0d6;   /* apagado */
  --text-3:  #6d7da8;   /* etiquetas micro */

  /* -------------------------------------------------------
     ACENTOS  (energía Foxstocks — SOLO estados, nunca dominante)
  ------------------------------------------------------- */
  --success:       #33d69f;
  --success-bg:    rgba(51, 214, 159, 0.15);
  --success-line:  rgba(51, 214, 159, 0.42);
  --warning:       #f7b955;
  --warning-bg:    rgba(247, 185, 85, 0.15);
  --warning-line:  rgba(247, 185, 85, 0.42);
  --danger:        #fb6270;
  --danger-bg:     rgba(251, 98, 112, 0.15);
  --danger-line:   rgba(251, 98, 112, 0.42);
  --violet:        #9d7bf5;
  --violet-bg:     rgba(157, 123, 245, 0.15);
  --magenta:       #ef6fb3;
  --magenta-bg:    rgba(239, 111, 179, 0.15);

  /* cian de marca como acento translúcido (KPI "Registros", chips) */
  --brand-cyan-bg:    rgba(70, 213, 224, 0.13);
  --brand-cyan-line:  rgba(70, 213, 224, 0.42);

  /* Glow de marca del fondo de la app */
  --app-glow:
    radial-gradient(1100px 460px at 12% -8%,
      rgba(47, 111, 224, 0.13), transparent 60%);

  /* -------------------------------------------------------
     TIPOGRAFÍA
  ------------------------------------------------------- */
  --font-body:     "Inter", system-ui, -apple-system, sans-serif;
  --font-display:  "Space Grotesk", "Inter", system-ui, sans-serif;

  --fs-display:  22px;   /* marca, h2 de página */
  --fs-h:        15px;   /* título de sección */
  --fs-body:     13px;
  --fs-sm:       12px;
  --fs-xs:       10.5px; /* etiquetas micro en mayúsculas */
  --fs-num:      16px;   /* valores KPI y números de tabla */

  /* -------------------------------------------------------
     ESPACIADO  (base 4)
  ------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  /* -------------------------------------------------------
     RADIOS
  ------------------------------------------------------- */
  --r-xs:   6px;
  --r-sm:   9px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* -------------------------------------------------------
     SOMBRAS / ELEVACIÓN
  ------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(2, 6, 20, 0.4);
  --sh-2: 0 6px 20px rgba(2, 6, 20, 0.35);
  --sh-3: 0 18px 44px rgba(2, 6, 20, 0.5);
  --ring-focus: 0 0 0 3px rgba(47, 111, 224, 0.28);

  /* -------------------------------------------------------
     MOVIMIENTO
  ------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 140ms;
  --dur-2: 200ms;
  --dur-3: 280ms;
}