@layer theme, base, mui, components, utilities;
@import 'tailwindcss';

:root {
  --background: #ffffff;
  --foreground: #171717;
  --border-color: var(--mui-palette-customColors-border);
  --border-radius: var(--mui-shape-borderRadius);
  --primary-color: var(--mui-palette-primary-main);
  --background-color: var(--mui-palette-background-default);
  --background-color-rgb: var(--mui-palette-background-paperChannel);
  --header-height: 64px;
  --header-z-index: var(--mui-zIndex-appBar);
  --footer-z-index: 10;
  --customizer-z-index: var(--mui-zIndex-drawer);
  --search-z-index: var(--mui-zIndex-tooltip);
  --drawer-z-index: var(--mui-zIndex-drawer);
  --backdrop-color: rgba(0, 0, 0, 0.5);
  --mui-mainColorChannels-shadow: var(--mui-mainColorChannels-lightShadow);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--my-font);
  --font-mono: var(--my-font);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  /* background: var(--background);
  color: var(--foreground); */
  font-family: var(--my-font);
}

/* *,
::before,
::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border-width: 0;
  border-style: solid;
  border-color: var(--border-color, currentColor);
} */

@theme {
  /* Colors From Plugin */
  --color-primary: var(--primary-color);
  --color-primaryLight: var(--mui-palette-primary-lightOpacity);
  --color-primaryLighter: var(--mui-palette-primary-lighterOpacity);
  --color-primaryDark: var(--mui-palette-primary-dark);
  --color-secondary: var(--mui-palette-secondary-main);
  --color-error: var(--mui-palette-error-main);
  --color-errorLight: var(--mui-palette-error-lightOpacity);
  --color-errorLighter: var(--mui-palette-error-lighterOpacity);
  --color-warning: var(--mui-palette-warning-main);
  --color-info: var(--mui-palette-info-main);
  --color-infoLight: var(--mui-palette-info-lightOpacity);
  --color-infoLighter: var(--mui-palette-info-lighterOpacity);
  --color-success: var(--mui-palette-success-main);
  --color-successLight: var(--mui-palette-success-lightOpacity);
  --color-textPrimary: var(--mui-palette-text-primary);
  --color-textSecondary: var(--mui-palette-text-secondary);
  --color-textDisabled: var(--mui-palette-text-disabled);
  --color-actionActive: var(--mui-palette-action-active);
  --color-actionHover: var(--mui-palette-action-hover);
  --color-actionSelected: var(--mui-palette-action-selected);
  --color-actionFocus: var(--mui-palette-action-focus);
  --color-backgroundPaper: var(--mui-palette-background-paper);
  --color-backgroundDefault: var(--mui-palette-background-default);
  --color-track: var(--mui-palette-customColors-trackBg);
  --color-backdrop: var(--backdrop-color);
  --color-border: var(--mui-palette-customColors-inputBorder);
  --color-cardBg: var(--mui-palette-customColors-cardBg);

  /* Box Shadows From Plugin */
  --shadow-xs: var(--mui-customShadows-xs);
  --shadow-sm: var(--mui-customShadows-sm);
  --shadow-md: var(--mui-customShadows-md);
  --shadow-lg: var(--mui-customShadows-lg);
  --shadow-xl: var(--mui-customShadows-xl);

  /* Screen From Plugin */
  --breakpoint-sm: 600px;
  --breakpoint-md: 900px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1536px;
  --breakpoint-2xl: 1920px;

  /* Border Radius From Plugin */
  --radius-none: 0px;
  --radius-xs: var(--mui-shape-customBorderRadius-xs);
  --radius-sm: var(--mui-shape-customBorderRadius-sm);
  --radius-default: 0.625rem;
  --radius-md: var(--mui-shape-customBorderRadius-md);
  --radius-lg: var(--mui-shape-customBorderRadius-lg);
  --radius-xl: var(--mui-shape-customBorderRadius-xl);
  --radius-2xl: 0.75rem;
  --radius-3xl: 1rem;
  --radius-4xl: 1.5rem;
  --radius-full: 9999px;
}

@layer utilities {
  .container-y {
    @apply md:py-10 sm:py-8 py-5;
  }
  .container-x {
    @apply md:px-30 sm:px-20 px-5;
  }
}

@layer base {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border-width: 0;
    border-style: solid;
    border-color: var(--mui-palette-customColors-inputBorder, currentColor);
  }
}