src/index.css

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

/* ---------------------------------------------------------------------------
   Palette — "ledger": cool near-neutrals, one electric blue, nothing else.
   Square corners, hairline rules, no shadows anywhere. Monospace throughout.
--------------------------------------------------------------------------- */

:root {
  --c-bg: #f4f4f2;
  --c-panel: #ffffff;
  --c-ink: #0f1113;
  /* Secondary text. */
  --c-mut: #616460;
  /* Tertiary text, captions, rules-adjacent labels. */
  --c-dim: #9b9d99;
  --c-line: #deded8;

  /*
   * The one colour that does not flip with the theme: the tile a third-party logo
   * sits on. Org avatars come as one image with no dark variant, and some are a
   * black glyph on transparency — OpenAI's is 81% transparent with a mean luminance
   * of 0 — which is invisible on a #07090c background. A fixed light tile keeps every
   * logo legible in both themes without needing to know anything about the image, and
   * in light mode it is indistinguishable from the page.
   */
  --c-tile: #f4f4f2;

  --c-hot: #0b5fd0;
  --c-hot-ink: #ffffff;
  --c-hot-dim: #8fb6ea;

  --c-bad: #c2352a;
  --c-warn: #9a6200;
  --c-good: #0f7a4f;
}

.dark {
  --c-bg: #07090c;
  --c-panel: #0b0e12;
  --c-ink: #eef1f4;
  --c-mut: #828892;
  --c-dim: #484d55;
  --c-line: #181c22;

  --c-hot: #4d9dff;
  --c-hot-ink: #04070d;
  --c-hot-dim: #26496f;

  --c-bad: #ff6b5e;
  --c-warn: #e0a047;
  --c-good: #3fbd85;
}

@theme inline {
  --color-bg: var(--c-bg);
  --color-panel: var(--c-panel);
  --color-ink: var(--c-ink);
  --color-mut: var(--c-mut);
  --color-dim: var(--c-dim);
  --color-line: var(--c-line);
  --color-tile: var(--c-tile);

  --color-hot: var(--c-hot);
  --color-hot-ink: var(--c-hot-ink);
  --color-hot-dim: var(--c-hot-dim);

  --color-bad: var(--c-bad);
  --color-warn: var(--c-warn);
  --color-good: var(--c-good);

  /* One family. The reference uses the system stack, so nothing to load. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: var(--font-mono);

  /* Square is part of the identity — neutralise Tailwind's rounded scale. */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-3xl: 0px;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--c-line);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

::selection {
  background: var(--c-hot);
  color: var(--c-hot-ink);
}

:focus-visible {
  outline: 2px solid var(--c-hot);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Typographic devices carried over from the reference
--------------------------------------------------------------------------- */

/* Wide-tracked micro caption. Used for every label and column header. */
.cap {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-dim);
}

/*
 * Headlines read as a dim sentence with the load-bearing words picked out:
 * <i> lifts to full ink, <em> goes accent. Neither italicises.
 */
.lede {
  margin: 0;
  font-size: clamp(18px, 2.8vw, 24px);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-dim);
  max-width: 34ch;
}

.lede i,
.lede em {
  font-style: normal;
}

.lede i {
  color: var(--c-ink);
}

.lede em {
  color: var(--c-hot);
}

/* ---------------------------------------------------------------------------
   Scrollbars
--------------------------------------------------------------------------- */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-line) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--c-line);
  border: 3px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--c-dim);
  background-clip: content-box;
}

/* ---------------------------------------------------------------------------
   Motion
--------------------------------------------------------------------------- */

@keyframes sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(300%);
  }
}

.animate-sweep {
  animation: sweep 2s linear infinite;
}

/* Screen transition. Keyed remount re-triggers it; no animation library needed. */
@keyframes enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-enter {
  animation: enter 0.18s ease-out;
}

@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.animate-blink {
  animation: blink 1.1s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}