/* ==========================================================
   WHALE OS Shadow & Elevation System v1.0
   ========================================================== */

:root {
  /* Relate Multi-Layer Elevation Scale (Midnight Ink tinted) */
  --shadow-0: none;
  --shadow-xs: 0 1px 2px rgba(2, 5, 32, 0.04);
  --shadow-1: 0 1px 2px rgba(2, 5, 32, 0.04), 0 2px 4px rgba(2, 5, 32, 0.02);
  --shadow-2: 0 1px 2px rgba(2, 5, 32, 0.04), 0 4px 12px rgba(2, 5, 32, 0.03);
  --shadow-3: 0 4px 8px rgba(2, 5, 32, 0.04), 0 12px 24px rgba(2, 5, 32, 0.06);
  --shadow-4: 0 10px 20px -2px rgba(2, 5, 32, 0.08), 0 4px 6px -1px rgba(2, 5, 32, 0.04);
  --shadow-5: 0 20px 25px -5px rgba(2, 5, 32, 0.10), 0 10px 10px -5px rgba(2, 5, 32, 0.04);

  /* Relate Component Specific */
  --shadow-relate-card: var(--shadow-2);
  --shadow-relate-card-hover: var(--shadow-3);
  --shadow-relate-dropdown: var(--shadow-4);
  --shadow-relate-modal: var(--shadow-5);

  /* Subtle Focus Ring (Azure Focus / Royal Signal) */
  --focus-ring: 0 0 0 3px rgba(20, 90, 255, 0.15);
  --focus-ring-cyan: 0 0 0 3px rgba(0, 153, 255, 0.15);
  --glow-sm: 0 2px 8px rgba(20, 90, 255, 0.12);
  --glow-md: 0 4px 16px rgba(20, 90, 255, 0.18);
  --glow-lg: 0 8px 24px rgba(20, 90, 255, 0.22);
}

/* Utilities */
.shadow-0 { box-shadow: var(--shadow-0); }
.shadow-1 { box-shadow: var(--shadow-1); }
.shadow-2 { box-shadow: var(--shadow-2); }
.shadow-3 { box-shadow: var(--shadow-3); }
.shadow-4 { box-shadow: var(--shadow-4); }
.shadow-5 { box-shadow: var(--shadow-5); }

.glow-sm { box-shadow: var(--glow-sm); }
.glow-md { box-shadow: var(--glow-md); }

/* Component Defaults */
.card-shadow {
  box-shadow: var(--shadow-relate-card);
  transition: box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-shadow:hover {
  box-shadow: var(--shadow-relate-card-hover);
}

.modal-shadow {
  box-shadow: var(--shadow-relate-modal);
}

.dropdown-shadow {
  box-shadow: var(--shadow-relate-dropdown);
}

.tooltip-shadow {
  box-shadow: var(--shadow-1);
}

.button-shadow:hover {
  box-shadow: var(--shadow-1);
}