/**
 * Design tokens – jedna paleta dla ciemnego/jasnego i dla stron z inline CSS (profile, index).
 * ff-light-theme.css oraz style w widokach powinny odwoływać się do tych zmiennych.
 */
:root {
  --ff-brand: #ff5500;
  --ff-brand-hover: #ea580c;
  --ff-brand-muted: rgba(255, 85, 0, 0.2);

  --ff-bg-page-dark: #000000;
  --ff-bg-page-light: #f4f4f5;

  --ff-surface-glass-dark: rgba(255, 255, 255, 0.08);
  --ff-surface-glass-light: rgba(255, 255, 255, 0.92);

  --ff-text-on-dark-primary: #fafafa;
  --ff-text-on-dark-muted: #a1a1aa;
  --ff-text-on-light-primary: #18181b;
  --ff-text-on-light-muted: #52525b;

  --ff-border-subtle-dark: rgba(255, 255, 255, 0.1);
  --ff-border-subtle-light: rgba(0, 0, 0, 0.1);

  --ff-focus-ring: rgba(255, 85, 0, 0.55);
  --ff-radius-card: 1rem;
}

body.light-mode {
  color-scheme: light;
}

body:not(.light-mode) {
  color-scheme: dark;
}