/**
 * Depth — inset & elevation shadows
 */

:root {
  --shadow-color-elevation: oklch(40.3% 0.03 262);
  --shadow-color-inset-drop: oklch(61% 0.03 262);

  --shadow-inset: 0 1px 0 oklch(61% 0.03 262 / 0.15),
    inset 0 2px 2px oklch(0% 0 0 / 0.1);

  --shadow-xs: 0 1px 2px oklch(40.3% 0.03 262 / 0.14),
    0 1px 1px oklch(40.3% 0.03 262 / 0.08);
  --shadow-sm: 0 2px 6px oklch(40.3% 0.03 262 / 0.16),
    0 1px 3px oklch(40.3% 0.03 262 / 0.12);
  --shadow-md: 0 6px 16px oklch(40.3% 0.03 262 / 0.18),
    0 2px 6px oklch(40.3% 0.03 262 / 0.12);
  --shadow-lg: 0 12px 28px oklch(40.3% 0.03 262 / 0.22),
    0 4px 12px oklch(40.3% 0.03 262 / 0.14);
  --shadow-xl: 0 20px 48px oklch(40.3% 0.03 262 / 0.28),
    0 8px 20px oklch(40.3% 0.03 262 / 0.18);
}

[data-theme="dark"] {
  --shadow-color-elevation: oklch(0% 0 0);
  --shadow-xs: 0 1px 3px oklch(0% 0 0 / 0.5), 0 1px 2px oklch(0% 0 0 / 0.35);
  --shadow-sm: 0 3px 8px oklch(0% 0 0 / 0.55), 0 2px 4px oklch(0% 0 0 / 0.4);
  --shadow-md: 0 8px 20px oklch(0% 0 0 / 0.6), 0 4px 10px oklch(0% 0 0 / 0.45);
  --shadow-lg: 0 14px 32px oklch(0% 0 0 / 0.68), 0 6px 16px oklch(0% 0 0 / 0.5);
  --shadow-xl: 0 22px 50px oklch(0% 0 0 / 0.78), 0 10px 24px oklch(0% 0 0 / 0.58);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-color-elevation: oklch(0% 0 0);
    --shadow-xs: 0 1px 3px oklch(0% 0 0 / 0.5), 0 1px 2px oklch(0% 0 0 / 0.35);
    --shadow-sm: 0 3px 8px oklch(0% 0 0 / 0.55), 0 2px 4px oklch(0% 0 0 / 0.4);
    --shadow-md: 0 8px 20px oklch(0% 0 0 / 0.6), 0 4px 10px oklch(0% 0 0 / 0.45);
    --shadow-lg: 0 14px 32px oklch(0% 0 0 / 0.68), 0 6px 16px oklch(0% 0 0 / 0.5);
    --shadow-xl: 0 22px 50px oklch(0% 0 0 / 0.78), 0 10px 24px oklch(0% 0 0 / 0.58);
  }
}