/* =============================================================
   Nexus Codex — Core Tokens
   Cyberpunk: deep void backgrounds, neon cyan + electric violet
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Orbitron:wght@400;500;600;700;800;900&family=Chakra+Petch:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- COLOR — RAW PALETTE ---------- */

  /* Voids — backgrounds */
  --void-000: #000004;       /* absolute black, behind everything */
  --void-050: #07071a;       /* base canvas */
  --void-100: #0d0d24;       /* card, panel */
  --void-200: #14143a;       /* raised surface */
  --void-300: #1d1a52;       /* hover surface */
  --void-400: #2a2570;       /* divider on dark */

  /* Cyan — primary neon */
  --cyan-100: #b8fbff;
  --cyan-200: #7df9ff;
  --cyan-300: #2ef0ff;
  --cyan-400: #00d9ff;       /* primary neon */
  --cyan-500: #00b8e6;
  --cyan-600: #008fb8;

  /* Violet — secondary neon */
  --violet-100: #d9b8ff;
  --violet-200: #b487ff;
  --violet-300: #8b5cf6;
  --violet-400: #7c3aed;     /* primary violet */
  --violet-500: #6320d4;
  --violet-600: #4c1aa3;

  /* Magenta — glitch / error */
  --magenta-300: #ff5cf0;
  --magenta-400: #ff2bd6;

  /* Lime — accent / success (CRT phosphor) */
  --lime-300: #b8ff5c;
  --lime-400: #8aff2b;

  /* Amber — warning */
  --amber-300: #ffd45c;
  --amber-400: #ffb02b;

  /* Whites */
  --ink-000: #ffffff;
  --ink-050: #e8e6ff;        /* slightly cool white */
  --ink-100: #c8c4ee;
  --ink-200: #9994c2;
  --ink-300: #6964a0;
  --ink-400: #44406e;

  /* ---------- COLOR — SEMANTIC ---------- */

  /* Surfaces */
  --bg:          var(--void-050);
  --bg-elev-1:   var(--void-100);
  --bg-elev-2:   var(--void-200);
  --bg-elev-3:   var(--void-300);
  --bg-inverse:  var(--ink-050);

  /* Foregrounds */
  --fg-1: var(--ink-050);          /* primary text */
  --fg-2: var(--ink-100);          /* secondary text */
  --fg-3: var(--ink-200);          /* tertiary, captions */
  --fg-4: var(--ink-300);          /* placeholders, disabled */
  --fg-on-neon: var(--void-000);   /* text sitting on cyan/violet fills */

  /* Brand */
  --brand-primary:   var(--cyan-400);
  --brand-secondary: var(--violet-400);
  --brand-glow:      #00d9ff;
  --brand-glow-2:    #7c3aed;

  /* States */
  --success: var(--lime-400);
  --warning: var(--amber-400);
  --danger:  var(--magenta-400);
  --info:    var(--cyan-400);

  /* Borders / lines */
  --border-1:    rgba(124, 58, 237, 0.20);  /* default hairline (violet wash) */
  --border-2:    rgba(0, 217, 255, 0.35);   /* highlighted */
  --border-3:    rgba(0, 217, 255, 0.80);   /* focus / active */
  --grid-line:   rgba(124, 58, 237, 0.12);  /* background grid */

  /* ---------- SHADOWS / GLOW ---------- */
  --shadow-1: 0 1px 0 rgba(0, 217, 255, 0.04), 0 2px 8px rgba(0, 0, 8, 0.6);
  --shadow-2: 0 2px 0 rgba(0, 217, 255, 0.06), 0 8px 24px rgba(0, 0, 8, 0.7);
  --shadow-3: 0 4px 0 rgba(0, 217, 255, 0.08), 0 16px 48px rgba(0, 0, 8, 0.8);

  /* Neon glow (use as box-shadow OR text-shadow via filter) */
  --glow-cyan-sm: 0 0 6px rgba(0, 217, 255, 0.6), 0 0 12px rgba(0, 217, 255, 0.35);
  --glow-cyan-md: 0 0 8px rgba(0, 217, 255, 0.8), 0 0 24px rgba(0, 217, 255, 0.5), 0 0 48px rgba(0, 217, 255, 0.25);
  --glow-cyan-lg: 0 0 12px rgba(0, 217, 255, 0.9), 0 0 36px rgba(0, 217, 255, 0.6), 0 0 80px rgba(0, 217, 255, 0.35);
  --glow-violet-sm: 0 0 6px rgba(124, 58, 237, 0.6), 0 0 12px rgba(124, 58, 237, 0.35);
  --glow-violet-md: 0 0 8px rgba(124, 58, 237, 0.8), 0 0 24px rgba(124, 58, 237, 0.5), 0 0 48px rgba(124, 58, 237, 0.25);
  --glow-magenta-md: 0 0 8px rgba(255, 43, 214, 0.8), 0 0 24px rgba(255, 43, 214, 0.5);

  /* Text glow (to be used in text-shadow) */
  --text-glow-cyan: 0 0 8px rgba(0, 217, 255, 0.7), 0 0 16px rgba(0, 217, 255, 0.4);
  --text-glow-violet: 0 0 8px rgba(124, 58, 237, 0.7), 0 0 16px rgba(124, 58, 237, 0.4);

  /* ---------- RADIUS ---------- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;     /* default for cards */
  --radius-4: 12px;
  --radius-5: 20px;
  --radius-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- TYPE — FAMILIES ---------- */
  /* Display: Audiowide ≈ wordmark "NEXUS CODEX" rounded neon-tube caps */
  --font-display: 'Audiowide', 'Orbitron', system-ui, sans-serif;
  /* Heading: Orbitron — geometric, technical, pairs with display */
  --font-heading: 'Orbitron', 'Audiowide', system-ui, sans-serif;
  /* Body: Chakra Petch — clean, slightly technical, very readable */
  --font-body:    'Chakra Petch', system-ui, -apple-system, sans-serif;
  /* Mono: JetBrains Mono — code, tabular, terminal-feel */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE — SCALE ---------- */
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   60px;
  --fs-5xl:   84px;
  --fs-6xl:  120px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.7;

  --tracking-tight:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.12em;     /* eyebrows, kicker */
  --tracking-widest:   0.24em;     /* all-caps display */

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, .05, .35, 1);
  --ease-snap:   cubic-bezier(.2, 1.4, .4, 1);   /* slight overshoot */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
  --dur-glitch:  60ms;
}

/* =============================================================
   LIGHT MODE — opt-in via [data-theme="light"]
   Same DNA, daylight surface. Cyan stays primary; glows become
   subtle drop-shadows. Use for docs, dashboards, print-leaning
   surfaces. Marketing site stays dark by default.
   ============================================================= */

[data-theme="light"] {
  /* Surfaces — off-white with the faintest violet wash */
  --void-000: #ffffff;
  --void-050: #f7f6fb;       /* base canvas */
  --void-100: #ffffff;       /* card */
  --void-200: #f0eef7;       /* raised */
  --void-300: #e6e3f0;       /* hover */
  --void-400: #d6d2e6;       /* divider */

  /* Cyan — darken by one step so it has contrast on white */
  --cyan-100: #003d4a;
  --cyan-200: #006080;
  --cyan-300: #0085a8;       /* primary on light */
  --cyan-400: #00a3cc;
  --cyan-500: #00b8e6;
  --cyan-600: #2ef0ff;

  /* Violet — same darken */
  --violet-100: #2d1670;
  --violet-200: #4c1aa3;
  --violet-300: #6320d4;     /* primary violet on light */
  --violet-400: #7c3aed;
  --violet-500: #8b5cf6;
  --violet-600: #b487ff;

  /* States — keep saturated but darken */
  --magenta-300: #c41a9e;
  --magenta-400: #a01585;
  --lime-300: #4a7a00;
  --lime-400: #3d6600;
  --amber-300: #b87300;
  --amber-400: #8f5800;

  /* Inks become darks */
  --ink-000: #000000;
  --ink-050: #0d0d24;        /* primary text */
  --ink-100: #2a2570;
  --ink-200: #44406e;
  --ink-300: #6964a0;
  --ink-400: #9994c2;

  /* Re-bind semantic */
  --bg:          var(--void-050);
  --bg-elev-1:   var(--void-100);
  --bg-elev-2:   var(--void-200);
  --bg-elev-3:   var(--void-300);
  --bg-inverse:  var(--void-050) /* same on light; #07071a if you want */;

  --fg-1: var(--ink-050);
  --fg-2: var(--ink-100);
  --fg-3: var(--ink-200);
  --fg-4: var(--ink-300);
  --fg-on-neon: var(--ink-000);

  --brand-primary:   var(--cyan-300);
  --brand-secondary: var(--violet-300);

  --success: var(--lime-400);
  --warning: var(--amber-400);
  --danger:  var(--magenta-400);
  --info:    var(--cyan-300);

  /* Borders — solid, not violet wash */
  --border-1: rgba(13, 13, 36, 0.10);
  --border-2: rgba(0, 133, 168, 0.40);
  --border-3: rgba(0, 133, 168, 0.80);
  --grid-line: rgba(13, 13, 36, 0.05);

  /* Shadows — real elevation, not neon */
  --shadow-1: 0 1px 2px rgba(13, 13, 36, 0.06), 0 1px 3px rgba(13, 13, 36, 0.08);
  --shadow-2: 0 2px 4px rgba(13, 13, 36, 0.06), 0 4px 12px rgba(13, 13, 36, 0.08);
  --shadow-3: 0 4px 8px rgba(13, 13, 36, 0.08), 0 12px 32px rgba(13, 13, 36, 0.12);

  /* Glows — keep but soften dramatically. On light, they read as a tint. */
  --glow-cyan-sm:   0 0 0 1px rgba(0, 133, 168, 0.18), 0 2px 6px rgba(0, 133, 168, 0.20);
  --glow-cyan-md:   0 0 0 1px rgba(0, 133, 168, 0.25), 0 4px 14px rgba(0, 133, 168, 0.28);
  --glow-cyan-lg:   0 0 0 2px rgba(0, 133, 168, 0.30), 0 8px 28px rgba(0, 133, 168, 0.35);
  --glow-violet-sm: 0 0 0 1px rgba(99, 32, 212, 0.18), 0 2px 6px rgba(99, 32, 212, 0.22);
  --glow-violet-md: 0 0 0 1px rgba(99, 32, 212, 0.25), 0 4px 14px rgba(99, 32, 212, 0.28);
  --glow-magenta-md: 0 0 0 1px rgba(196, 26, 158, 0.25), 0 4px 14px rgba(196, 26, 158, 0.28);

  /* Text glow off — replaced by solid color */
  --text-glow-cyan: none;
  --text-glow-violet: none;
}

/* H1 in light mode reads better solid, not glowing */
[data-theme="light"] .nx h1,
[data-theme="light"] .nx-h1,
[data-theme="light"] .nx-display { color: var(--cyan-300); text-shadow: none; }
[data-theme="light"] .nx-eyebrow { text-shadow: none; }
[data-theme="light"] .nx-bg-scanlines { background-image: none; }
[data-theme="light"] .nx-bg-radial-glow {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(124, 58, 237, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(0, 133, 168, 0.05), transparent 60%),
    var(--void-050);
}

/* =============================================================
   Semantic element styles — opt in via class .nx-prose or scope
   ============================================================= */

.nx, .nx-prose {
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-feature-settings: "ss01", "tnum";
}

/* Display — like the wordmark, used sparingly */
.nx h1, .nx-h1, .nx-display {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cyan-300);
  text-shadow: var(--text-glow-cyan);
  font-weight: 400;
  margin: 0 0 var(--s-5);
}

.nx h2, .nx-h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-1);
  font-weight: 700;
  margin: 0 0 var(--s-4);
}

.nx h3, .nx-h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-1);
  font-weight: 600;
  margin: 0 0 var(--s-3);
}

.nx h4, .nx-h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-1);
  font-weight: 600;
  margin: 0 0 var(--s-2);
}

/* Eyebrow / kicker — small all-caps label, common in cyberpunk UIs */
.nx-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--cyan-400);
  text-shadow: var(--text-glow-cyan);
}

.nx p, .nx-p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

.nx-lead {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.nx code, .nx-code,
.nx pre, .nx-pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--cyan-200);
  background: var(--void-100);
  padding: 0.1em 0.4em;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-2);
}

.nx pre, .nx-pre {
  display: block;
  padding: var(--s-4);
  overflow-x: auto;
  line-height: var(--lh-normal);
}

.nx a, .nx-a {
  color: var(--cyan-300);
  text-decoration: none;
  border-bottom: 1px solid var(--border-2);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nx a:hover, .nx-a:hover {
  color: var(--cyan-200);
  border-bottom-color: var(--cyan-300);
}

/* =============================================================
   Brand utility — grid background, scanlines, glitch
   ============================================================= */

.nx-bg-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  background-color: var(--bg);
}

.nx-bg-scanlines {
  background-image: repeating-linear-gradient(
    180deg,
    rgba(0, 217, 255, 0.03) 0,
    rgba(0, 217, 255, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
}

.nx-bg-radial-glow {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(124, 58, 237, 0.25), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(0, 217, 255, 0.18), transparent 60%),
    var(--void-050);
}