:root, [data-theme="dark"] {
  /* Base palette (source: DESIGN.md / tokens/wavefling.css) */
  --wf-black: #050505;
  --wf-surface: #202020;
  --wf-surface-raised: #292929;
  --wf-surface-sunken: #111111;
  --wf-text: #F5F5F3;
  --wf-text-muted: #A5A5A5;
  --wf-text-on-light: #050505;
  --wf-accent: #FF4D67;
  --wf-border: #373737;
  --wf-border-subtle: #282828;
  --wf-overlay: #000000;
  --wf-success: #58C795;
  --wf-warning: #FFC66D;
  --wf-danger: #FF6975;
  --wf-focus: #FF4D67;
  --wf-white-hover: #E2E2E0;

  /* Semantic aliases */
  --bg-page: var(--wf-black);
  --surface-sunken: var(--wf-surface-sunken);
  --surface-card: var(--wf-surface);
  --surface-raised: var(--wf-surface-raised);
  --text-primary: var(--wf-text);
  --text-muted: var(--wf-text-muted);
  --text-on-light: var(--wf-text-on-light);
  --text-accent: var(--wf-accent);
  --border-default: var(--wf-border);
  --border-subtle: var(--wf-border-subtle);
  --action-primary-bg: var(--wf-text);
  --action-primary-bg-hover: var(--wf-white-hover);
  --action-primary-fg: var(--wf-text-on-light);
  --action-secondary-bg: var(--wf-surface);
  --action-secondary-fg: var(--wf-text);
  --action-accent-bg: var(--wf-accent);
  --action-accent-fg: var(--wf-text-on-light);
  --photo-scrim: linear-gradient(180deg, rgb(0 0 0 / 0) 40%, #000 100%); /* @kind color */
  --photo-scrim-hero: linear-gradient(90deg, rgb(5 5 5 / .92) 0%, rgb(5 5 5 / .55) 45%, rgb(5 5 5 / 0) 80%); /* @kind color */
  color-scheme: dark;
}