:root {
  --accent: #4361ee;
  --accent-light: #5a75f0;
  --canvas: #f0f1f7;
  --ink: #171923;
  --ink-inverse: #f0f1f7;
  --card: #ffffff;
  --line: #d6d8e6;
  --muted: #6c7094;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(12, 23, 53, 0.08);

  /* Font families - Bricolage Grotesque (headers), Acumin Variable (body) */
  --font-header: bricolage-grotesque, sans-serif;
  --font-header-light: bricolage-grotesque, sans-serif;
  --font-body: acumin-variable, sans-serif;

  /* Grey scale */
  --grey-1: #242a3d;
  --grey-2: #3a3e54;
  --grey-3: #6c7094;
  --grey-4: #afb2c9;
  --grey-5: #d6d8e6;
  --grey-6: #f0f1f7;

  /* Badge colors (light mode) */
  --badge-green-bg: #dff7e8;
  --badge-green-fg: #166534;
  --badge-yellow-bg: #fff5cc;
  --badge-yellow-fg: #7a5c00;
  --badge-violet-bg: #ece7ff;
  --badge-violet-fg: #4a2a99;
}

html.dark {
  --canvas: #0a0c12;
  --ink: #f0f1f7;
  --card: #171923;
  --line: #2c3042;
  --muted: #afb2c9;
  --shadow: none;

  /* Inverses for dark mode (also used for selection text in light mode) */
  --card-inverse: #171923;
  --ink-inverse: #f0f1f7;
  --faded-inverse: #afb2c9;
  --line-inverse: #2c3042;

  /* Grey scale inverses */
  --grey-1-inverse: #f0f1f7;
  --grey-2-inverse: #d6d8e6;
  --grey-3-inverse: #afb2c9;
  --grey-4-inverse: #6c7094;
  --grey-5-inverse: #2c3042;
  --grey-6-inverse: #171923;

  /* Badge colors (dark mode) */
  --badge-green-bg: rgba(34, 197, 94, 0.3);
  --badge-green-fg: #86efac;
  --badge-yellow-bg: rgba(234, 179, 8, 0.2);
  --badge-yellow-fg: #fde047;
  --badge-violet-bg: rgba(139, 92, 246, 0.3);
  --badge-violet-fg: #c4b5fd;
}