/* Design tokens: the one place for colours, type, spacing and radii.
   Shared by the app and the lock page. Rework the look here, not in components. */
:root {
  /* Surfaces and text: dark "night library" */
  --color-bg: #0e0f12;
  --color-surface: #17191e;
  --color-surface-raised: #20232a;
  --color-border: #2a2d35;
  --color-text: #edebe6;
  --color-text-reading: #e3e1db;
  --color-text-muted: #a3a3ad;
  --color-text-faint: #8e8e98;
  --color-accent: #8ab4ff;
  --color-accent-hover: #b5ceff;
  --color-on-accent: #0e0f12;
  --color-image-placeholder: #2b3340;

  /* Category dots (config refers to these by name) */
  --dot-accent: var(--color-accent);
  --dot-green: #8fe0ae;
  --dot-orange: #f2a07b;
  --dot-gold: #f0cf7a;
  --dot-violet: #c8a8f0;

  /* Quality badges */
  --badge-featured-bg: #3a3220;
  --badge-featured-fg: #f0cf7a;
  --badge-good-bg: #1e3326;
  --badge-good-fg: #8fe0ae;
  --badge-well-sourced-bg: #20283a;
  --badge-well-sourced-fg: #a9c4ff;

  /* Type */
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --text-reading: 17px;
  --leading-reading: 1.65;

  /* Shape and space */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --touch-target: 44px;
  --gutter: 20px;
  --column-max: 520px;
}