/* ════════════════════════════════════════════════════════════════════
   Rockssol Analytics — Mission Terminal Design System
   Tokens basados en Handoff Spec.md (Dirección E)
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* Backgrounds */
    --bg:        #06090f;   /* base canvas */
    --bg-alt:    #0a0e16;   /* tickers, alt rows */
    --panel:     #0e131c;   /* cards, panels */
    --panel-hi:  #141b27;   /* hover/selected */

    /* Borders */
    --border:    rgba(140, 180, 220, 0.12);
    --border-hi: rgba(140, 180, 220, 0.22);
    --rule:      rgba(140, 180, 220, 0.06);

    /* Text */
    --text:      #eaf0f7;
    --text-dim:  #7a8a9e;
    --text-mute: #3e4a5c;

    /* Accents funcionales */
    --cyan:      #5ad6e8;   /* identidad / acción primaria / OK neutro */
    --amber:     #f0a93b;   /* alerta / valor sobre umbral */
    --green:     #a3ff5e;   /* live / positivo */
    --magenta:   #ff5cd0;   /* hotspot crítico */
    --red:       #e85f5c;   /* valor crítico individual */

    /* Aliases para compat con CSS existente */
    --bg-card:        var(--panel);
    --bg-card-hover:  var(--panel-hi);
    --text-muted:     var(--text-dim);
    --accent:         var(--cyan);
    --accent-hover:   #7de4f2;
    --ok:             var(--green);
    --warn:           var(--amber);
    --err:            var(--red);
    --crit:           var(--magenta);

    /* Type families */
    --font-display: "Archivo Narrow", "Archivo", system-ui, sans-serif;
    --font-sans:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    --font-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

    /* Type scale (mobile-first) */
    --fs-display-1: clamp(48px, 14vw, 72px);
    --fs-display-2: clamp(28px, 6vw, 36px);
    --fs-h1: 22px;
    --fs-body: 14px;
    --fs-small: 12px;
    --fs-mono: 11px;
    --fs-mono-xs: 9px;

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

    /* Radii — bordes definidos, casi sin redondeo */
    --r-0: 0px;
    --r-1: 2px;
    --r-2: 4px;

    /* Letter spacing */
    --ls-mono: 1.4px;
    --ls-mono-tight: 1.2px;

    /* Breakpoints (referencia) */
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
}