@import "./vendor/mdxx-design-system/mdxx-frontend-runtime-tokens.css";
@import "./vendor/mdxx-design-system/mdxx-showcase-components.css";
@import "./vendor/mdxx-design-system/mdxx-runtime-components.css";

:root {
  --color-brand: var(--color-brand-purple-600);
  --color-brand-rgb: var(--color-brand-purple-rgb);
  --color-brand-hover: var(--color-brand-purple-500);
  --color-brand-active: var(--color-brand-purple-700);
  --color-brand-light: var(--color-brand-purple-50);
  --color-primary: var(--color-brand-purple-600);
  --color-ring: var(--color-brand-purple-600);
  --color-sidebar-primary: var(--color-brand-purple-600);
  --color-sidebar-accent: var(--color-brand-purple-50);
  --color-sidebar-accent-foreground: var(--color-brand-purple-700);
  --color-sidebar-ring: var(--color-brand-purple-600);

  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-tertiary);
  --text-disabled: var(--color-text-disabled);
  --border-subtle: var(--color-border);
  --border-strong: var(--color-text-disabled);
  --bg-page: var(--color-bg-page);
  --bg-surface: var(--color-background);
  --bg-surface-soft: var(--color-bg-header);
  --bg-brand-soft: var(--color-brand-light);

  --mdx-brand-rgb: var(--color-brand-purple-rgb);
  --mdx-brand-50: var(--color-brand-purple-50);
  --mdx-brand-100: var(--color-brand-purple-100);
  --mdx-brand-200: var(--color-brand-purple-200);
  --mdx-brand-300: var(--color-brand-purple-300);
  --mdx-brand-400: var(--color-brand-purple-400);
  --mdx-brand-500: var(--color-brand-purple-500);
  --mdx-brand-600: var(--color-brand-purple-600);
  --mdx-brand-700: var(--color-brand-purple-700);
  --mdx-brand-800: var(--color-brand-purple-800);
  --mdx-brand-900: var(--color-brand-purple-900);

  --mdx-radius-sm: var(--radius-sm);
  --mdx-radius-md: var(--control-radius);
  --mdx-radius-lg: var(--radius-lg);
  --mdx-radius-xl: var(--radius-xl);
  --mdx-space-1: var(--spacing-1);
  --mdx-space-2: var(--spacing-2);
  --mdx-space-3: var(--spacing-3);
  --mdx-space-4: var(--spacing-4);
  --mdx-space-5: var(--spacing-5);
  --mdx-space-6: var(--spacing-6);
  --mdx-font-size-xs: var(--font-size-xs);
  --mdx-font-size-sm: var(--font-size-sm);
  --mdx-font-size-md: var(--font-size-md);
  --mdx-font-size-lg: var(--font-size-lg);
  --mdx-font-size-xl: var(--font-size-xl);
  --mdx-font-size-2xl: var(--font-size-2xl);
  --mdx-font-size-3xl: var(--font-size-3xl);
  --mdx-line-height-tight: var(--line-height-tight);
  --mdx-line-height-normal: var(--line-height-normal);
  --mdx-motion-fast: var(--motion-fast);
  --mdx-motion-normal: var(--motion-normal);
  --mdx-motion-easing: var(--motion-easing);
  --mdx-shadow-sm: var(--shadow-sm);
  --mdx-shadow-md: var(--shadow-md);
  --mdx-shadow-lg: var(--shadow-lg);

  --control-ring: rgba(var(--color-brand-rgb), 0.16);
}