/* ============================================================
   APEX shared design tokens.

   This file is loaded on every page (linked from base.html). It
   only defines CSS variables on :root — it does NOT apply any
   styles to elements directly, so adding the link is safe for
   pages that have not adopted the tokens yet.

   Pages adopt the tokens by writing rules that reference
   var(--apex-*) names. The main dashboard (index.html) is the
   first page to do so; other pages can opt in incrementally.

   Tokens are deliberately prefixed (`--apex-…`) to avoid
   colliding with the legacy variables already used by
   style.css for the light / dark theme switch.

   Palette source: design/reference.html (Sora · Instrument
   Serif · JetBrains Mono command-center reference).
   ============================================================ */

:root {
  /* ---------- Surfaces (dark-theme baseline) ---------- */
  --apex-bg-base:       #08101F;
  --apex-bg-elevated:   #0E1A2E;
  --apex-bg-card:       #111E36;
  --apex-bg-hover:      #18253E;

  --apex-border:        #1E2D48;
  --apex-border-strong: #2A3E60;

  /* ---------- Text ---------- */
  --apex-text-primary:   #E8EEF7;
  --apex-text-secondary: #8A9AB5;
  --apex-text-muted:     #4F5F7A;

  /* ---------- Accents ----------
     One cool primary, one warning, one critical. Critical
     (red) is reserved strictly for active critical threats —
     never decorative. See dashboard.css for usage rules. */
  --apex-accent:       #5BC8E6;
  --apex-accent-dim:   rgba(91, 200, 230, 0.15);

  --apex-warning:      #F2B14A;
  --apex-warning-dim:  rgba(242, 177, 74, 0.12);

  --apex-critical:     #E85D5D;
  --apex-critical-dim: rgba(232, 93, 93, 0.12);

  --apex-success:      #6FCF97;
  --apex-success-dim:  rgba(111, 207, 151, 0.12);

  /* ---------- Typography ----------
     `Sora` for body, `Instrument Serif` for display, and
     `JetBrains Mono` for technical data (IOC values, hashes,
     IPs, CVEs, timestamps). The @import lives in the per-page
     head so we only pay the font-fetch cost on pages that
     opt into this theme. */
  --apex-font-body:    'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --apex-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --apex-font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* ---------- Geometry ---------- */
  --apex-radius-sm:  4px;
  --apex-radius-md:  8px;
  --apex-radius-lg:  10px;

  /* Subtle layered depth — used in place of heavy borders /
     shadows so the surfaces feel like a command console. */
  --apex-elev-1: 0 1px 0 rgba(255, 255, 255, 0.02) inset,
                 0 1px 0 rgba(0, 0, 0, 0.30);
}