/* =========================================================
   theme.css – the site's look: night sky, violet accent,
   IBM Plex fonts. Colours and fonts are set in :root below,
   so the whole look can be changed in one place.
   ========================================================= */

:root {
  /* ---- Purple palette: violet ---- */
  --glow: 130, 60, 240;       /* main purple glow (R, G, B) */
  --accent-rgb: 167, 139, 250;
  --accent: #a78bfa;
  --tag-text: #c4b5fd;
  --name-mid: #c4b5fd;        /* middle colour of the name gradient */

  --bg: #0a0b1a;
  --bg-alt: #10122a;
  --surface: rgba(255, 255, 255, 0.04);
  --text: #ecebf7;
  --muted: #a3a3c2;
  --border: rgba(255, 255, 255, 0.09);
  --accent-text: #0a0b1a;
  --placeholder-bg: rgba(255, 255, 255, 0.05);
  --placeholder-text: #7d7da3;

  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-heading: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius: 16px;
}

/* Soft glows at the top of the page – they scroll away with the content */
body {
  background:
    radial-gradient(ellipse 60% 50% at 85% 5%, rgba(var(--glow), 0.28), transparent 70%) top / 100% 1000px no-repeat,
    radial-gradient(ellipse 50% 40% at 0% 45%, rgba(40, 160, 180, 0.14), transparent 70%) top / 100% 1000px no-repeat,
    var(--bg);
}

/* Stars: a scattered few, plus a denser cluster near the purple glow (top right) */
.hero {
  background:
    /* cluster near the glow */
    radial-gradient(2px 2px at 86% 8%, #ffffffee, transparent),
    radial-gradient(1px 1px at 79% 14%, #ffffffbb, transparent),
    radial-gradient(1px 1px at 92% 18%, #ffffff99, transparent),
    radial-gradient(1.5px 1.5px at 74% 6%, rgba(var(--accent-rgb), 0.9), transparent),
    radial-gradient(1px 1px at 96% 30%, #ffffffaa, transparent),
    radial-gradient(1px 1px at 83% 26%, #ffffff77, transparent),
    radial-gradient(1.5px 1.5px at 70% 22%, #ffffffcc, transparent),
    radial-gradient(1px 1px at 89% 38%, rgba(var(--accent-rgb), 0.8), transparent),
    radial-gradient(1px 1px at 77% 34%, #ffffff66, transparent),
    radial-gradient(1px 1px at 94% 4%, #ffffff99, transparent),
    radial-gradient(1px 1px at 66% 12%, #ffffff77, transparent),
    radial-gradient(2px 2px at 98% 46%, #ffffffbb, transparent),
    /* scattered elsewhere */
    radial-gradient(1px 1px at 18% 30%, #ffffffaa, transparent),
    radial-gradient(1.5px 1.5px at 40% 12%, #ffffffcc, transparent),
    radial-gradient(1px 1px at 66% 74%, #ffffff77, transparent),
    radial-gradient(1px 1px at 8% 80%, #ffffff66, transparent);
}

.site-header { background: rgba(10, 11, 26, 0.7); backdrop-filter: blur(14px); border-bottom-color: var(--border); }

.hero h1 {
  font-weight: 300;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #ffffff 30%, var(--name-mid) 70%, #8fd6e0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow,
.card-meta,
.badge { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; }
.eyebrow { color: var(--accent); }
.section h2 { font-weight: 400; }

.btn { border-radius: 999px; }
.btn-ghost { background: rgba(255, 255, 255, 0.05); }

.card { backdrop-filter: blur(6px); }
.card:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.tags li { background: rgba(var(--accent-rgb), 0.12); color: var(--tag-text); }

.thesis { background: transparent; }
.thesis-inner {
  background: linear-gradient(135deg, rgba(var(--glow), 0.18), rgba(40, 160, 180, 0.08));
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 48px;
}
.badge { background: rgba(var(--accent-rgb), 0.15); padding: 4px 12px; border-radius: 999px; }

.area { background: var(--surface); }


@media (max-width: 860px) {
  .thesis-inner { padding: 28px 20px; }
}

/* ---- Outreach pages: a warmer glow than the technical pages ---- */
:root {
  --warm-rgb: 245, 185, 113;
  --warm: #f5b971;
}
body.outreach {
  background:
    radial-gradient(ellipse 60% 50% at 85% 5%, rgba(var(--warm-rgb), 0.16), transparent 70%) top / 100% 1000px no-repeat,
    radial-gradient(ellipse 50% 40% at 0% 45%, rgba(var(--glow), 0.16), transparent 70%) top / 100% 1000px no-repeat,
    var(--bg);
}
body.outreach .badge { color: var(--warm); background: rgba(var(--warm-rgb), 0.14); }
body.outreach .steps li::before { color: var(--warm); }