app/src/styles/_variables.css

/* ============================================================================ */
/* Theme Variables (inspired by Distill) */
/* ============================================================================ */
:root {
  /* Neutral palette */
  --neutral-600: rgb(107, 114, 128);
  --neutral-400: rgb(185, 185, 185);
  --neutral-300: rgb(228, 228, 228);
  --neutral-200: rgb(245, 245, 245);

  /* Primary brand color */
  --primary-color: rgb(232, 137, 171);
  --primary-color-hover: rgb(212, 126, 156);
  --on-primary: #ffffff;

  --text-color: rgba(0,0,0,.85);
  --muted-color: rgba(0,0,0,.6);
  --border-color: rgba(0,0,0,.1);

  /* Light surfaces & links */
  --surface-bg: #fafafa;
  --code-bg: #f6f8fa;
  --link-underline: var(--primary-color); /* based on --primary-color */
  --link-underline-hover: var(--primary-color-hover);

  --spacing-1: 8px;
  --spacing-2: 12px;
  --spacing-3: 16px;
  --spacing-4: 24px;
  --spacing-5: 32px;
  --spacing-6: 40px;
  --spacing-7: 48px;
  --spacing-8: 56px;
  --spacing-9: 64px;
  --spacing-10: 72px;

  /* Palettes config */
  --palette-count: 6; /* default number of colors per palette */

  /* Z-index scale */
  --z-base: 0;           /* background/base */
  --z-content: 1;        /* regular content */
  --z-elevated: 10;      /* wide/full-width blocks, images */
  --z-overlay: 1000;     /* overlays/lightboxes */
  --z-modal: 1100;       /* modals/dialogs */
  --z-tooltip: 1200;     /* tooltips/popovers */
}
/* Theme tokens for dark mode */
[data-theme="dark"] {
  --text-color: rgba(255,255,255,.9);
  --muted-color: rgba(255,255,255,.7);
  --border-color: rgba(255,255,255,.15);
  --surface-bg: #12151b;
  --code-bg: #12151b;
  /* Primary in dark mode */
  --primary-color: rgb(232, 137, 171);
  --primary-color-hover: rgb(212, 126, 156);
  --on-primary: #0f1115;

  color-scheme: dark;
  background: #0f1115;
}