CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

@media (prefers-color-scheme: dark) {
  /* Slightly dim all visuals */
  img, video {
    filter: brightness(0.85) contrast(1.05);
  }

  /* Invert for SVG/PNG assets like logos */
  .logo-dark-invert {
    filter: invert(1) hue-rotate(180deg);
  }

  /* Icon color */
  .icon { color: var(--text); }
}

/* data-theme ile */
[data-theme="dark"] img {
  filter: brightness(0.85);
}