z-axis-and-depth

name	z-axis-and-depth
description	Use when creating visual depth in layout. Subtle shadows, layered elements, and z-stacking define hierarchy without flat or 3D extremes.

Z-Axis and Depth

Editorial depth = subtle shadows, intentional layering. Avoid: skeuomorphic 3D, drop shadows on everything, flat-only.

Shadow elevation system

Elevation	Use	Shadow
0 (flat)	Background, base	none
1 (subtle)	Card, button	0 1px 2px rgba(0,0,0,0.05)
2 (raised)	Hover state, modal	0 4px 12px rgba(0,0,0,0.08)
3 (lifted)	Dropdown, popover	0 8px 24px rgba(0,0,0,0.12)
4 (modal)	Critical UI	0 16px 40px rgba(0,0,0,0.20)

Z-index discipline

Define z-index scale:

:root {
  --z-base: 0;
  --z-elevated: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-toast: 10000;
}

Never use arbitrary z-index values (z-index: 9999). Stick to the scale.

Avoid

1. Drop shadows on body text (overdesigned)
2. 3D buttons with bevels (skeuomorphic)
3. Multiple shadows on same element
4. Inconsistent shadow language across components

Where this fits in the X3 empire

Depth system for CardPrepAI components.