ui/src/index.css

@import "tailwindcss";

@theme {
  --color-paper: var(--bg-paper);
  --color-strong-paper: var(--bg-strong-paper);
  --color-panel: var(--bg-panel);
  --color-ink: var(--text-ink);
  --color-soft-ink: var(--text-soft-ink);
  --color-accent-blue: var(--accent-blue);
  --color-accent-rust: var(--accent-rust);
  --color-accent-teal: var(--accent-teal);

  --font-serif: "Source Serif 4", serif;
  --font-sans: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

:root {
  /* Light Mode */
  --bg-paper: #f4efe6;
  --bg-strong-paper: #fcf8f1;
  --bg-panel: #f7f1e8;
  --text-ink: #171412;
  --text-soft-ink: #5d564f;
  --accent-blue: #4e67b6;
  --accent-rust: #ba5a45;
  --accent-teal: #1a766c;

  --spider-blend: multiply;
}

html.dark {
  /* Dark Mode */
  --bg-paper: #11100f;
  --bg-strong-paper: #181614;
  --bg-panel: #141210;
  --text-ink: #f2ede4;
  --text-soft-ink: #b7aea2;
  --accent-blue: #8fa7ff;
  --accent-rust: #ef8d74;
  --accent-teal: #62c2b4;

  --spider-blend: screen;
}

body {
  background-color: var(--bg-paper);
  color: var(--text-ink);
  font-family: var(--font-sans);
}

.display-heading,
.section-title {
  font-family: var(--font-serif);
  letter-spacing: -0.03em;
}

/* 3. Chroma Ink Text Shadow */
.chroma-ink {
  text-shadow:
    0.02em 0 0 var(--accent-blue),
    -0.02em 0 0 var(--accent-rust);
}

@layer utilities {
  /* Custom Scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--text-soft-ink);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--text-ink);
  }
}