
@theme {
  --background-image-custom: var(--background-image, none);
  --blur-custom: var(--background-blur, none);
  --opacity-custom: var(--background-image-opacity);
  --color-main: var(--color-text-primary);
  --color-secondary: var(--color-text-secondary);
  --color-tertiary: var(--color-text-tertiary);
  --color-bg: var(--color-background-primary);
  --color-bg-secondary: var(--color-background-secondary);
  --color-bg-tertiary: var(--color-background-tertiary);
  --color-surface: var(--color-surface);
  --color-surface-elevated: var(--color-surface-elevated);
  --color-border: var(--color-border);
  --color-border-secondary: var(--color-border-secondary);
  --color-primary: var(--color-primary);
  --color-primary-hover: var(--color-primary-hover);
  --color-accent: var(--color-accent);
  --color-accent-hover: var(--color-accent-hover);
  --color-success: var(--color-success);
  --color-warning: var(--color-warning);
  --color-danger: var(--color-danger);
  --color-error: var(--color-error);

  /* shadows */
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);

  /* radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-round: 50%;

  /* transition */
  --transition-duration-fast: 150ms;
  --transition-duration-medium: 250ms;
  --transition-duration-slow: 350ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-apple: cubic-bezier(0.3, 1, 0.3, 1);

  /* breakpoints */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}
