/* =========================================================
   LOS ALAMOS · TOKENS
   Archivo: frontend/assets/css/core/tokens.css
   Variables de diseño (color, tipografía, espaciado, radios, movimiento). Solo :root.
========================================================= */
.la-app {
    /* Superficies: un solo matiz (azul marino), sin negro puro */
    --la-bg: #0A1521;
    --la-bg-side: #08111B;
    --la-surface: #0F1D2C;
    --la-surface-2: #142538;
    --la-line: rgba(148, 163, 184, 0.14);
    --la-line-strong: rgba(148, 163, 184, 0.26);

    /* Texto (contraste ≥ 4.5:1 sobre --la-surface) */
    --la-text: #E9EEF3;
    --la-soft: #A9B6C3;
    --la-dim: #8392A1;

    /* Marca: un único acento */
    --la-gold: #D4A017;
    --la-gold-hi: #E8B84B;
    --la-gold-bg: rgba(212, 160, 23, 0.10);
    --la-gold-line: rgba(212, 160, 23, 0.32);
    --la-on-gold: #14100A;

    /* Estado (semántica, no decoración) */
    --la-ok: #3DD68C;
    --la-ok-bg: rgba(61, 214, 140, 0.11);
    --la-warn: #E8B84B;
    --la-warn-bg: rgba(232, 184, 75, 0.11);
    --la-err: #F47C7C;
    --la-err-bg: rgba(244, 124, 124, 0.11);

    /* Tipografía */
    --la-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --la-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Forma */
    --la-r-card: 14px;
    --la-r-ctl: 10px;
    --la-r-sm: 6px;

    /* Layout */
    --la-side-w: 248px;
    --la-top-h: 64px;
    --la-page-max: 1320px;

    /* Movimiento */
    --la-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --la-t: 0.18s var(--la-ease);

    /* Capas */
    --la-z-top: 20;
    --la-z-scrim: 40;
    --la-z-side: 50;
}