/**
 * Antumo Design System - Effects Variables
 * Generated from Figma: https://www.figma.com/design/aKIP8PcGfbAMKAZNhEbDOZ/Antumo-|-Design-System?node-id=450-59876
 */

:root {
  /* ===== Shadow Colors ===== */
  --shadow-color-xs: rgba(10, 13, 18, 0.05);
  --shadow-color-sm-1: rgba(10, 13, 18, 0.1);
  --shadow-color-sm-2: rgba(10, 13, 18, 0.1);
  --shadow-color-md-1: rgba(10, 13, 18, 0.1);
  --shadow-color-md-2: rgba(10, 13, 18, 0.06);
  --shadow-color-lg-1: rgba(10, 13, 18, 0.08);
  --shadow-color-lg-2: rgba(10, 13, 18, 0.03);
  --shadow-color-lg-3: rgba(10, 13, 18, 0.04);
  --shadow-color-xl-1: rgba(10, 13, 18, 0.08);
  --shadow-color-xl-2: rgba(10, 13, 18, 0.03);
  --shadow-color-xl-3: rgba(10, 13, 18, 0.04);
  --shadow-color-2xl-1: rgba(10, 13, 18, 0.18);
  --shadow-color-2xl-2: rgba(10, 13, 18, 0.04);
  --shadow-color-3xl-1: rgba(10, 13, 18, 0.14);
  --shadow-color-3xl-2: rgba(10, 13, 18, 0.04);

  /* ===== Box Shadows ===== */
  /* shadow-xs: Single layer, subtle shadow */
  --shadow-xs: 0px 1px 2px 0px var(--shadow-color-xs);

  /* shadow-sm: Two layers */
  --shadow-sm:
    0px 1px 3px 0px var(--shadow-color-sm-1),
    0px 1px 2px -1px var(--shadow-color-sm-2);

  /* shadow-md: Two layers, medium elevation */
  --shadow-md:
    0px 4px 6px -1px var(--shadow-color-md-1),
    0px 2px 4px -2px var(--shadow-color-md-2);

  /* shadow-lg: Three layers, large elevation */
  --shadow-lg:
    0px 12px 16px -4px var(--shadow-color-lg-1),
    0px 4px 6px -2px var(--shadow-color-lg-2),
    0px 2px 2px -1px var(--shadow-color-lg-3);

  /* shadow-xl: Three layers, extra large elevation */
  --shadow-xl:
    0px 20px 24px -4px var(--shadow-color-xl-1),
    0px 8px 8px -4px var(--shadow-color-xl-2),
    0px 3px 3px -1.5px var(--shadow-color-xl-3);

  /* shadow-2xl: Two layers, 2x large elevation */
  --shadow-2xl:
    0px 24px 48px -12px var(--shadow-color-2xl-1),
    0px 4px 4px -2px var(--shadow-color-2xl-2);

  /* shadow-3xl: Two layers, 3x large elevation */
  --shadow-3xl:
    0px 32px 64px -12px var(--shadow-color-3xl-1),
    0px 5px 5px -2.5px var(--shadow-color-3xl-2);

  /* ===== Focus Ring ===== */
  --focus-ring-color: #5B4DFF;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring: 0 0 0 var(--focus-ring-offset) white, 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);

  /* ===== Border Radius ===== */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-full: 9999px;
}

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

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

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

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

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

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

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

.shadow-none {
  box-shadow: none;
}

/* ===== Focus Ring Utility ===== */
.focus-ring {
  outline: none;
  box-shadow: var(--focus-ring);
}

.focus-ring-inset {
  outline: none;
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* Focus visible state */
.focus-visible-ring:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ===== Border Radius Utility Classes ===== */
.rounded-none {
  border-radius: var(--radius-none);
}

.rounded-xs {
  border-radius: var(--radius-xs);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}

.rounded-2xl {
  border-radius: var(--radius-2xl);
}

.rounded-3xl {
  border-radius: var(--radius-3xl);
}

.rounded-full {
  border-radius: var(--radius-full);
}