/*
 * SE Theme — Design Tokens
 * These CSS custom properties MUST stay in sync with:
 *   → se-core/assets/css/se-gamification.css  (plugin variables)
 *   → se-core/assets/css/se-cyberpunk.css     (font definitions)
 * Any change here should be mirrored in both plugin files.
 */

/* ── Google Fonts loaded in functions.php enqueue:
       Orbitron      : display headings, logo, level numbers
       Rajdhani      : subheadings, labels, nav items, UI chrome
       JetBrains Mono: code blocks, terminal, command snippets
       Sora          : body copy, article text
   ─────────────────────────────────────────────────── */

:root {
  /* ── Colour palette ──────────────────────────────── */
  --clr-neon:     #00ffe7;   /* Primary cyan — XP, highlights, CTAs     */
  --clr-neon2:    #ff2d78;   /* Pink-red — danger, critical, exploit     */
  --clr-neon3:    #ffe600;   /* Yellow — coins, streak, warnings         */
  --clr-neon4:    #7b2fff;   /* Purple — achievements, special events    */
  --clr-green:    #00ff88;   /* Success, confirmed, level-up             */
  --clr-blue:     #3b9eff;   /* Info, links, leaderboard                 */
  --clr-orange:   #ff8c00;   /* Exploit hunter rank, warm accents        */

  /* ── Backgrounds ─────────────────────────────────── */
  --bg:           #050a0f;   /* Deepest — body, behind everything        */
  --bg2:          #080f18;   /* Cards, panels, dropdowns                 */
  --bg3:          #0c1520;   /* Elevated cards, code blocks              */
  --bg4:          #101e2e;   /* Hover states, active items               */
  --bg-glass:     rgba(8,15,24,.85);  /* Glass / frosted panels          */

  /* ── Text ────────────────────────────────────────── */
  --text:         #c8d8e8;   /* Body text                                */
  --text-dim:     #6b8cac;   /* Muted / placeholder — 5.65:1 on bg (AA)  */
  --text-bright:  #e8f4ff;   /* Headings, emphasis                       */
  --text-code:    #a8f0d0;   /* Inline code                              */

  /* ── Borders ─────────────────────────────────────── */
  --border:       rgba(0,255,231,.12);
  --border-hover: rgba(0,255,231,.30);
  --border-strong:rgba(0,255,231,.45);

  /* ── Typography ──────────────────────────────────── */
  --font-display: 'Orbitron', 'Courier New', monospace;
  --font-ui:      'Rajdhani', 'Trebuchet MS', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-body:    'Sora', 'Segoe UI', system-ui, sans-serif;

  /* ── Spacing scale ───────────────────────────────── */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* ── Layout ──────────────────────────────────────── */
  --container:    1200px;
  --container-sm:  860px;
  --sidebar-w:     320px;
  --header-h:       60px;
  --radius:          4px;
  --radius-lg:       8px;

  /* ── Shadows / glow ──────────────────────────────── */
  --glow-neon:    0 0 20px rgba(0,255,231,.25);
  --glow-green:   0 0 20px rgba(0,255,136,.2);
  --glow-red:     0 0 20px rgba(255,45,120,.2);
  --shadow-card:  0 4px 24px rgba(0,0,0,.6);
  --shadow-hover: 0 8px 40px rgba(0,0,0,.8), 0 0 0 1px var(--border-hover);

  /* ── Transitions ─────────────────────────────────── */
  --t-fast:   120ms ease;
  --t-mid:    200ms ease;
  --t-slow:   400ms ease;

  /* ── Rank colours (mirrored from plugin) ─────────── */
  --rank-script-kiddie:  #8888aa;
  --rank-recon-beginner: #00bbff;
  --rank-exploit-hunter: #ff6600;
  --rank-bug-bounty-pro: #ff44cc;
  --rank-elite-hacker:   #00ffe7;
  --rank-cyber-legend:   #ffe600;

  /* ── Z-index layers ──────────────────────────────── */
  --z-below:    -1;
  --z-base:      1;
  --z-card:     10;
  --z-header:  100;
  --z-dropdown:200;
  --z-overlay: 500;
  --z-modal:  1000;
}

/* Dark overlay scanlines (CRT effect — lightweight, CSS only) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.022) 2px,
    rgba(0,0,0,.022) 4px
  );
  pointer-events: none;
  z-index: var(--z-modal);
  will-change: auto;
}