/* Aether ADP — spacing, radii, borders, shadows, motion.
   Spacing steps are the gap/padding values the source actually uses. */

:root {
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-2-5: 10px;
  --spacing-3: 12px;
  --spacing-3-5: 14px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-16: 64px;
  --spacing-20: 80px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  --border-width: 1px;
  --border-width-thick: 1.5px;

  /* Untitled-UI style rings: the source draws component borders as INSET shadows,
     so a border and a drop shadow can coexist in one boxShadow value. */
  --ring-primary: inset 0 0 0 1px var(--color-gray-300);
  --ring-secondary: inset 0 0 0 1px var(--color-gray-200);
  --ring-error: inset 0 0 0 1px var(--color-error-600);

  --shadow-xs: 0px 1px 2px 0px rgba(16,24,40,0.05);
  --shadow-sm: 0px 1px 3px 0px rgba(16,24,40,0.10), 0px 1px 2px 0px rgba(16,24,40,0.06);
  --shadow-md: 0px 4px 8px -2px rgba(16,24,40,0.10), 0px 2px 4px -2px rgba(16,24,40,0.06);
  --shadow-lg: 0px 12px 16px -4px rgba(16,24,40,0.08), 0px 4px 6px -2px rgba(16,24,40,0.03);
  --shadow-xl: 0px 20px 24px -4px rgba(16,24,40,0.08), 0px 8px 8px -4px rgba(16,24,40,0.03);

  --duration-fast: 100ms; /* @kind other */
  --duration-base: 150ms; /* @kind other */
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --transition-base: all var(--duration-base) var(--easing-standard);
}