:root {
  /* System sans stack — same fallback Facebook serves to web
     visitors when their custom Facebook Sans isn't available.
     Picks San Francisco on macOS/iOS, Segoe UI on Windows,
     Roboto on Android, and falls back to Helvetica/Arial. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Display stack for the SUPERbarato logotype — condensed, heavy
     letterforms. Impact ships on Windows + macOS; the others fill
     in the gaps on older Mac and Linux. */
  --font-display: Impact, "Haettenschweiler", "Franklin Gothic Bold", "Charcoal", "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

  --bg: oklch(0.985 0.004 85);
  --surface: #ffffff;
  --panel: oklch(0.945 0.008 85);
  --hair: oklch(0.93 0.006 85);
  --soft: oklch(0.96 0.006 85);
  --ink: oklch(0.22 0.02 80);
  --ink-2: oklch(0.45 0.015 80);
  --ink-3: oklch(0.62 0.012 80);
  --ink-4: oklch(0.78 0.008 80);
  --accent: oklch(0.22 0.02 80);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* Aliases used by rails / categories. Map to existing tokens so the
     palette stays in one place. */
  --border: var(--hair);
  --border-hover: var(--ink-4);
  --bg-rail: var(--panel);
  --bg-hover: var(--soft);
  --bg-selected: oklch(0.93 0.025 240);
  --ink-dim: var(--ink-3);

  /* Scrollbar tokens — borrowed from the macatlas portal shell so
     scrollable areas (the main feed and rail bodies) get a thin,
     translucent thumb instead of the OS default. */
  --scrollbar-thumb: rgb(0 0 0 / 0.18);
  --scrollbar-thumb-hover: rgb(0 0 0 / 0.28);
}