/* This file contains the following effects:
    - shadow effects for UI components
    - gradient backgrounds
*/

:root {
  /* =========== SHADOW EFFECTS ===========  */
  /* #region Shadows */

  /* ========= SHADOW XS ========= */
  /* Inputs, subtle cards, borders */
  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

  /* ========= SHADOW SM ========= */
  /* Cards, dropdowns */
  --shadow-sm:
    0px 1px 3px 0px rgba(16, 24, 40, 0.10),
    0px 1px 2px -1px rgba(16, 24, 40, 0.10);

  /* ========= SHADOW MD ========= */
  /* Modals, popovers */
  --shadow-md:
    0px 4px 6px -1px rgba(16, 24, 40, 0.10),
    0px 2px 4px -2px rgba(16, 24, 40, 0.10);

  /* ========= SHADOW LG ========= */
  /* Elevated panels */
  --shadow-lg:
    0px 10px 15px -3px rgba(16, 24, 40, 0.10),
    0px 4px 6px -4px rgba(16, 24, 40, 0.10);

  /* ========= SHADOW XL ========= */
  /* Overlays, dialogs */
  --shadow-xl:
    0px 20px 25px -5px rgba(16, 24, 40, 0.10),
    0px 8px 10px -6px rgba(16, 24, 40, 0.10);

  /* #endregion Shadows */

  /* =========== GRADIENT BACKGROUNDS =========== */
  /* #region Gradient */
  --gradient-bg-primary: linear-gradient(180deg, var(--gradient-bg-start) 0%, var(--gradient-bg-end) 100%);

  /* #endregion Gradient */
}

/* Shadow Classes */
.cg-shadow-xs {
  box-shadow: var(--shadow-xs);
}

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

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

.cg-shadow-lg {
  box-shadow: var(--shadow-lg);
}

.cg-shadow-xl {
  box-shadow: var(--shadow-xl);
}