Box-shadow as a theme primitive

Shadows for elevation — token them too

:root {
  --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.10), 0 1px 2px -1px oklch(0 0 0 / 0.10);
  --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.10), 0 2px 4px -2px oklch(0 0 0 / 0.10);
  --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.10), 0 4px 6px -4px oklch(0 0 0 / 0.10);
}

The "double-shadow" technique

A single shadow looks fake. The Tailwind shadow scale (and most modern systems) layer TWO shadows: one sharp + close, one soft + far. The combination mimics real light scatter.

.card-resting { box-shadow: var(--shadow-sm); }
.card-hover   { box-shadow: var(--shadow-md); transition: box-shadow 0.15s; }

Promote a card on hover by jumping one shadow tier. Subtle "elevates toward the user" feel.

Dark mode shadow tip

On dark backgrounds, dark shadows are invisible. Use a slight WHITE rim shadow + dark drop for elevation:

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-md: 0 0 0 1px oklch(1 0 0 / 0.05), 0 4px 6px oklch(0 0 0 / 0.5);
  }
}

The first shadow is a 1px ring of barely-visible white — the "edge" you'd otherwise lose in dark mode.