/* ============================================================
   ZLS Laboratory V3 — Design Tokens
   Resident Evil Tactical UI · CLI Aesthetic
   ============================================================ */

:root {
    /* ── Backgrounds ── */
    --bg-void:         transparent;            /* deeply transparent to reveal blobs */
    --bg-base:         hsla(0, 0%, 8%, 0.6);   /* translucent main    */
    --bg-surface:      hsla(0, 0%, 12%, 0.7);  /* translucent panels  */
    --bg-elevated:     hsla(0, 0%, 16%, 0.85); /* raised elements     */
    --bg-bar:          hsla(0, 0%, 14%, 0.85); /* top/bottom bars     */
    --bg-glass:        hsla(0, 0%, 10%, 0.85); /* frosted panels     */

    /* ── Whites & Grays ── */
    --clr-white:       hsl(0, 0%, 92%);        /* #ebebeb — primary text      */
    --clr-gray-100:    hsl(0, 0%, 78%);        /* #c7c7c7 — secondary text    */
    --clr-gray-200:    hsl(0, 0%, 55%);        /* #8c8c8c — muted             */
    --clr-gray-300:    hsl(0, 0%, 35%);        /* #595959 — dim               */
    --clr-gray-400:    hsl(0, 0%, 22%);        /* #383838 — borders/dividers  */
    --clr-gray-500:    hsl(0, 0%, 16%);        /* #292929 — subtle            */

    /* ── Accent: Carmesí (Red from ZLS logo) ── */
    --clr-red:         hsl(0, 72%, 50%);       /* #db2424 — primary accent    */
    --clr-red-dim:     hsla(0, 72%, 50%, 0.15);
    --clr-red-glow:    hsla(0, 72%, 50%, 0.4);

    /* ── Functional ── */
    --clr-online:      hsl(120, 40%, 50%);     /* system online               */
    --clr-warning:     hsl(45, 90%, 50%);      /* warnings                    */

    /* ── Borders ── */
    --border-panel:    1px solid hsl(0, 0%, 22%);
    --border-subtle:   1px solid hsl(0, 0%, 18%);
    --border-active:   1px solid hsl(0, 0%, 35%);

    /* ── Typography ── */
    --ff-cli:   'Share Tech Mono', 'Consolas', 'Courier New', monospace;
    --ff-sys:   'Inter', 'Segoe UI', sans-serif;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-bold:     700;

    --fs-micro:  0.75rem;    /* 12px — IDs, stamps         */
    --fs-xs:     0.875rem;   /* 14px — labels, meta        */
    --fs-sm:     0.9375rem;  /* 15px — body small          */
    --fs-base:   1rem;       /* 16px — body (WCAG std)     */
    --fs-lg:     1.125rem;   /* 18px — panel titles        */
    --fs-xl:     1.5rem;     /* 24px — section titles      */
    --fs-2xl:    2rem;       /* 32px — display headings    */

    /* ── Spacing (compact UI, 4px base) ── */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;

    /* ── Bar heights ── */
    --bar-h:  32px;

    /* ── Z-Index ── */
    --z-bar:    100;
    --z-panel:  10;
    --z-modal:  200;
}