:root {
  /* --- Grayscale (B&W) --- */
  --c050: #fafaf9;
  --c100: #f5f5f4;
  --c200: #e7e5e4;
  --c300: #d6d3d1;
  --c400: #a8a29e;
  --c500: #78716c;
  --c600: #57534e;
  --c700: #44403c;
  --c800: #292524;
  --c900: #1c1917;
  --c950: #0c0a09;

  /* --- Shades --- */
  --shade-0: #06070a;
  --shade-1: #0e1016;
  --shade-2: #181d27;
  --shade-3: #212735;
  --shade-4: #2f384b;
  --shade-5: #374362;
  --shade-6: #576593;
  --shade-7: #8792ab;
  --shade-8: #9faecc;
  --shade-9: #e0e0e0;
  --shade-10: #ffffff;

  /* --- Semantic Mappings --- */
  --void: var(--shade-0);
  --black: var(--shade-2);
  --dark-grey: var(--shade-3);
  --grey: var(--shade-5);
  --light-grey: var(--shade-6);
  --silver: var(--shade-8);
  --white: var(--shade-10);
  --background: var(--shade-2);

  /* --- Palette --- */
  --coral: #ff8080;
  --red: #ff4346;
  --orange: #ff8046;
  --amber: #f59e0b;
  --yellow: #ffff46;
  --lime: #84cc16;
  --elouan-green: #7db84f;
  --green: #46ff81;
  --emerald: #10b981;
  --teal: #14b8a6;
  --cyan: #46ccff;
  --sky: #0ea5e9;
  --blue: #4680ff;
  --indigo: #6366f1;
  --violet: #8b5cf6;
  --purple: #8043ff;
  --fuchsia: #d946ef;
  --pink: #ff80de;
  --rose: #f43f5e;

  /* --- Socials & Links --- */
  --github: var(--c100);
  --bluesky: #048bff;
  --email: var(--violet);
  --rss: var(--orange);
  --reddit: #ff4500;
  --signal: #3a76f0;
  --discord: #6672F5;
  --default-highlight: var(--fuchsia);

  /* --- Typography --- */
  --font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", "Cascadia Code", monospace;
}

/* --- Global Styles --- */
body {
  font-family: Inter, sans-serif;
  max-width: 750px;
  margin: 0 auto;
  padding: 30px 10px;
  font-size: 1.1em;
  background-color: var(--c950);
  color: var(--c200);
  line-height: 1.6;
}

*::selection {
  background-color: var(--indigo);
  color: var(--c600);
}

/* --- Typography --- */
h1,
h2,
h3,
.heading {
  font-family: var(--font-mono);
  line-height: 1.2;
}

.heading {
  text-decoration: none;
}

.heading a {
  text-decoration: none;
}

.top-title {
  --color: var(--c50);
}

ul {
  padding-inline-start: 1em;
}

ul>li {
  list-style: "- ";
}

/* --- Links --- */
a {
  --color: var(--blue);
  color: var(--color);
}

a.heading {
  text-decoration: none;
}

a:hover {
  background-color: var(--color);
  color: var(--c950);
  outline: 2px solid var(--color);
}

a:focus {
  outline: 2px solid var(--color);
  text-decoration: none;
}

a.big {
  padding: 0.1em;
  font-weight: bold;
  margin: 0 0.2em;
}

a.big:first-of-type {
  margin-left: 0;
}

#github-profile-commit-status a {
  --color: var(--github);
  font-weight: bold;
}

/* --- Forms & Buttons --- */
label {
  display: block;
  padding: 0.3em 0;
}

label>* {
  display: block;
}

button {
  --color: var(--blue);
  color: var(--c050);
  background-color: var(--c800);
  outline: 2px solid var(--c800);
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: var(--color);
  color: var(--c050);
  outline: 2px solid var(--color);
}

button:focus {
  outline: 2px solid var(--color);
  text-decoration: none;
}

.search {
  width: 200px;
  height: 25px;
  font-size: 18px;
  background-color: var(--c800);
  color: var(--c050);
  border: none;
}

/* --- Tooltips --- */
.has-tooltip {
  border-bottom: 1px dotted var(--fuchsia);
  cursor: help;
  position: relative;
}

#tooltip-display {
  position: absolute;
  background-color: var(--c800);
  color: var(--c100);
  padding: 5px 10px;
  font-size: 0.85em;
  border: 1px solid var(--c600);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  z-index: 1010;
  white-space: nowrap;
  /*max-width: 250px;*/
  pointer-events: none;
}

#tooltip-display.visible {
  opacity: 1;
  visibility: visible;
}

/* --- Content & Figures --- */
content figure {
  margin: 2em 0;
}

content figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--c100);
  box-sizing: border-box;
}

content figcaption {
  padding: 0.75em 0.25em;
  text-align: center;
  font-size: 0.9em;
  color: var(--c400);
  line-height: 1.4;
}

/* --- Custom Elements --- */
#github-profile-commit-status {
  padding: 10px 0;
  font-size: 0.9em;
}