/* OtherVision — tokens del sistema visual: tipografía, radios, espaciados y la paleta base.
   Los componentes solo usan estas variables.

   Este archivo lo cargan también la landing, /splother/ y las páginas legales. La landing
   toma de acá solo lo que no es color; /splother/ y las legales sí usan esta paleta (gris con
   el acento violeta). **La app la pisa** con la de la landing en css/tema.css, que se carga
   justo después: un color de la app se cambia allá, no acá. */

:root {
  /* Capas (profundidad por superposición, no por sombras fuertes) */
  --fondo: #121212;
  --panel: rgba(30, 30, 30, 0.94); /* #1e1e1e al 94 % */
  --panel-solido: #1e1e1e;
  --panel-activo: #2a2a2a;
  --borde: rgba(255, 255, 255, 0.06);

  /* Texto */
  --texto: #ffffff;
  --texto-2: #a0a0a0;
  --texto-3: #606060;
  --texto-sobre-claro: #1e1e1e;

  /* Acento y estados (uso sutil) */
  --acento: #5f5ffb;
  --acento-suave: rgba(95, 95, 251, 0.14);
  --ok: #3ecf8e;
  --aviso: #f5a524;
  --error: #ff6b6b;

  /* Tipografía */
  /* Saira lleva toda la interfaz. Kumbh Sans es la voz de la marca: el logo y las dos
     acciones fijas de la barra (Mis proyectos · Nuevo splat). Dos fuentes y nada más. */
  --fuente: "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-marca: "Kumbh Sans", var(--fuente);
  --peso-regular: 400;
  --peso-medium: 500;
  --peso-semibold: 600;
  --peso-bold: 800;
  --t-h1: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --t-h2: 1.25rem;
  --t-cuerpo: 0.95rem;
  --t-chico: 0.8rem;

  /* Geometría */
  --r-card: 16px;
  --r-boton: 10px;
  --r-tag: 8px;
  --r-pastilla: 999px;
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;

  /* Elevación de botones y tags blancos */
  --sombra-boton: 0 6px 18px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);

  --transicion: 160ms ease;
}