/* =============================================================================
   tokens-vidriera.css — Identidad de Apollo Dynamics: sala de control
   =============================================================================
   Un solo acento: ámbar. Es el color de "encendido" en la traza, así que no se
   usa para decorar nada: si algo está en ámbar, es porque se prendió.
   Los estados semánticos (ok, rechazo) son otra familia y no compiten con él.

   NINGÚN color suelto en el resto del código. Si hace falta uno nuevo, entra acá.
   ============================================================================= */

:root {
  /* --- superficies ---------------------------------------------------------- */
  --fondo:            #0b0a09;   /* negro cálido, no negro puro */
  --superficie:       #121110;
  --superficie-alta:  #191716;
  --superficie-hover: #211e1c;
  --linea:            rgba(255, 248, 235, 0.08);
  --linea-fuerte:     rgba(255, 248, 235, 0.16);

  /* --- texto ---------------------------------------------------------------- */
  --tinta:            #f4efe6;
  --tinta-media:      #a8a099;
  --tinta-suave:      #6f6862;

  /* --- el acento ------------------------------------------------------------ */
  --ambar:            #f2b544;
  --ambar-fuerte:     #ffcd6b;
  --ambar-tenue:      rgba(242, 181, 68, 0.14);
  --ambar-linea:      rgba(242, 181, 68, 0.42);

  /* --- estados (nunca decorativos) ------------------------------------------ */
  --ok:               #6f9e63;
  --ok-tenue:         rgba(111, 158, 99, 0.16);
  --rechazo:          #c2553f;
  --rechazo-tenue:    rgba(194, 85, 63, 0.16);
  --aviso:            #c99a3f;

  /* --- tipografía ----------------------------------------------------------- */
  --fuente-titulo: 'Familjen Grotesk', 'Bricolage Grotesque', system-ui, sans-serif;
  --fuente-cuerpo: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-dato:   'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* --- ritmo ---------------------------------------------------------------- */
  --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px;
  --r5: 24px; --r6: 32px; --r7: 48px; --r8: 64px;

  /* Radios distintos a propósito: no todo es una tarjeta con el mismo borde. */
  --redondeo-chico:  3px;
  --redondeo:        6px;
  --redondeo-panel:  10px;

  --sombra-panel: 0 1px 0 rgba(255,248,235,0.04) inset, 0 18px 40px -24px rgba(0,0,0,0.9);

  /* --- movimiento ----------------------------------------------------------- */
  --enciende: 120ms;   /* lo que tarda un nodo en prenderse */
  --arista:   240ms;   /* lo que tarda la arista en recorrerse */
  --curva:    cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* La Vidriera es oscura siempre: es una sala de control, no una página que
   cambia con el sistema. Igual se declara el esquema para que los controles
   nativos (scrollbars, selects) vengan oscuros. */
:root { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

/* Todo número se lee en columna: sin tabular-nums, una latencia de 1.480 ms
   baila de lugar cuando pasa a 990 ms y la tabla parece temblar. */
.dato, td.dato, .ms, .tokens, .costo, code, kbd {
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

a { color: var(--ambar); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ambar-fuerte); }

:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
  border-radius: var(--redondeo-chico);
}

::selection { background: var(--ambar-tenue); color: var(--ambar-fuerte); }

/* Scrollbars discretas: en un panel de traza, una barra gris clara grita. */
* { scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* Se apagan las aristas y las transiciones largas, pero el ENCENDIDO se
     conserva: es información, no adorno. Sin él no se entiende la traza. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--enciende) !important;
  }
}