/* ==========================================================================
   writeups.redteami.ng — purple skin over the shared red theme.

   Loaded AFTER style.css, which build-dist.ps1 overwrites from the project
   root on every deploy — so the shared engine must never be forked. This file
   is writeups-only and survives the build (the whole folder is copied first,
   then only the shared files are stamped over).

   COLOUR ONLY. No layout, spacing, sizing or typography rules belong here —
   the format has to stay identical to the other two sites.

   The palette is almost entirely token-driven, so most of the work is the
   :root block. The rest of the file exists because ~30 rules in style.css
   hardcode the red rgb() triplets instead of reading a variable; those can't
   be reached by redefining tokens and have to be restated one by one.

     #ff2d48  rgb(255, 45, 72)   ->  #a855f7  rgb(168, 85, 247)   violet
     #ff5c39  rgb(255, 92, 57)   ->  #e879f9  rgb(232, 121, 249)  fuchsia
     #ff6b2b  rgb(255, 107, 43)  ->  #c77dff  rgb(199, 125, 255)  light violet
   ========================================================================== */

:root {
  /* Surfaces. These matter more than the accents: .post-card alone covers most
     of the viewport, so leaving the greys neutral makes the page still read as
     the grey/red original no matter how purple the buttons get. Each value is
     the original shifted toward violet at roughly the SAME lightness — the site
     must not get brighter, only warmer toward purple. */
  --bg-primary: #09060f;
  --bg-secondary: #140f20;
  --bg-card: #191128;
  --bg-elevated: #211735;
  --bg-glass: rgba(25, 17, 40, 0.65);

  /* Was a neutral white at 7% — a violet edge ties the panels together. */
  --border-subtle: rgba(199, 160, 255, 0.12);

  /* Accent colours — names kept from the red theme for compatibility. */
  --neon-cyan: #e879f9;
  --neon-purple: #a855f7;
  --neon-pink: #f472d0;
  --neon-orange: #c77dff;
  --neon-blue: #8b7dff;
  /* --neon-green stays: it signals success, not brand. */

  --gradient-primary: linear-gradient(135deg, #a855f7 0%, #e879f9 100%);
  --gradient-hero: linear-gradient(135deg, #08060d 0%, #1e0b33 48%, #120720 100%);
  --gradient-card-hover: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(232, 121, 249, 0.1) 100%);
  --gradient-glow: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
  --gradient-text: linear-gradient(120deg, #d8b4fe 0%, #a855f7 45%, #e879f9 100%);
  --gradient-border: linear-gradient(135deg, rgba(168, 85, 247, 0.5), rgba(232, 121, 249, 0.35));
  --gradient-mesh:
    radial-gradient(ellipse 70% 60% at 12% 8%, rgba(168, 85, 247, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 55% at 88% 22%, rgba(232, 121, 249, 0.12), transparent 55%),
    radial-gradient(ellipse 80% 70% at 50% 100%, rgba(199, 125, 255, 0.06), transparent 60%);

  --text-accent: #e879f9;
  --border-glow: rgba(168, 85, 247, 0.35);

  --shadow-glow-purple: 0 10px 40px -8px rgba(168, 85, 247, 0.35), 0 0 60px -20px rgba(168, 85, 247, 0.2);
  --shadow-glow-cyan: 0 10px 40px -8px rgba(232, 121, 249, 0.3), 0 0 60px -20px rgba(232, 121, 249, 0.15);
  --shadow-neon: 0 0 10px rgba(168, 85, 247, 0.5), 0 0 40px rgba(168, 85, 247, 0.15);
}

/* ---------- page chrome ---------- */
body::after {
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(168, 85, 247, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(232, 121, 249, 0.04) 0%, transparent 50%);
}

::selection {
  background: rgba(168, 85, 247, 0.3);
}

* {
  scrollbar-color: rgba(168, 85, 247, 0.5) transparent;
}

/* ---------- header / hero ---------- */
.header__nav-link.active {
  background: rgba(168, 85, 247, 0.1);
}

.hero__badge {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.25);
  box-shadow: 0 4px 20px -6px rgba(168, 85, 247, 0.4);
}

.btn--primary:hover {
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.5), 0 0 80px rgba(168, 85, 247, 0.2);
}

/* ---------- listing ---------- */
.filter-tag:hover {
  background: rgba(168, 85, 247, 0.08);
}

/* The card's top sheen is a neutral white wash in the source; violet keeps the
   biggest surface on the page from reading grey. */
.post-card {
  background:
    linear-gradient(180deg, rgba(199, 160, 255, 0.05), transparent 40%),
    var(--bg-card);
}

/* Image scrims and the hero wash bake in the OLD grey hex values instead of
   reading --bg-*, so they'd sit as grey veils over a violet page. Same alphas,
   re-tinted:  rgb(7,7,12) -> rgb(9,6,15),  rgb(20,20,29) -> rgb(25,17,40). */
.hero__bg-overlay {
  background:
    linear-gradient(90deg, rgba(9, 6, 15, 0.95) 0%, rgba(9, 6, 15, 0.72) 42%, rgba(9, 6, 15, 0.3) 100%),
    linear-gradient(180deg, transparent 55%, var(--bg-primary) 100%);
}

.featured__image::after {
  background: linear-gradient(90deg, transparent 55%, rgba(25, 17, 40, 0.9) 100%);
}

.post-card__image::after {
  background: linear-gradient(to top, rgba(25, 17, 40, 0.55), transparent 55%);
}

.post-card__category {
  color: #e9a6ff;
  background: rgba(9, 6, 15, 0.72);
  border: 1px solid rgba(168, 85, 247, 0.3);
}

/* This one reaches for yet another red (255, 45, 120) rather than a token. */
.article-hero__category {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.tag:hover {
  background: rgba(232, 121, 249, 0.06);
}

/* ---------- article body ---------- */
.article-content h2::before {
  box-shadow: 0 0 12px -2px rgba(168, 85, 247, 0.6);
}

/* Both halves of the source's selector list — inline code in paragraphs as
   well as in list items. */
.article-content p code,
.article-content li code {
  background: rgba(232, 121, 249, 0.1);
  border: 1px solid rgba(232, 121, 249, 0.15);
}

.article-content ol.references li::before {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
}

.callout {
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-left: 4px solid var(--neon-purple);
}

.callout--warning {
  background: rgba(199, 125, 255, 0.06);
  border-color: rgba(199, 125, 255, 0.2);
  border-left-color: var(--neon-orange);
}

/* ---------- sidebar ---------- */
.sidebar-toc__link:hover,
.sidebar-toc__link.active {
  background: rgba(232, 121, 249, 0.06);
}

.sidebar-share__btn:hover {
  background: rgba(168, 85, 247, 0.15);
}

/* ---------- animations ----------
   Keyframes can't be patched a property at a time — a later @keyframes with
   the same name replaces the earlier one wholesale, so both are restated. */
@keyframes pulse-border {
  0%, 100% { border-color: rgba(168, 85, 247, 0.25); }
  50% { border-color: rgba(168, 85, 247, 0.6); }
}

@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
  50% { text-shadow: 0 0 30px rgba(168, 85, 247, 0.8), 0 0 60px rgba(168, 85, 247, 0.4); }
}