@import 'tailwindcss';
@import './assets/css/theme.css';
@import './assets/css/utilities.css';

@layer base {
  body {
    @apply m-0 h-full w-full overflow-hidden bg-transparent p-0 font-[inherit] text-main;
  }

  html {
    @apply m-0 h-full w-full bg-transparent p-0;
  }

  #app {
    @apply h-full w-full bg-transparent;
  }

  :focus {
    @apply outline-none;
  }

  :focus-visible {
    @apply outline-2 outline-offset-2 outline-accent outline-solid;
  }

  ::selection {
    @apply bg-accent/20 text-main;
  }

  ::-webkit-scrollbar {
    @apply h-3 w-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply rounded-sm bg-accent/50 transition-colors duration-fast ease-standard;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-accent/70;
  }

  ::-webkit-scrollbar-corner {
    @apply bg-bg;
  }

  :root {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
  }

  :root,
  .light,
  [data-theme='light'] {
    --background-image: none;
    --background-image-opacity: 1;
    --color-text-primary: #1d1d1f;
    --color-text-secondary: #6e6e73;
    --color-text-tertiary: #86868b;
    --color-background-primary: #ffffff;
    --color-background-secondary: #f5f5f7;
    --color-background-tertiary: #fbfbfd;
    --color-surface: rgb(255 255 255 / 80%);
    --color-surface-elevated: rgb(255 255 255 / 95%);
    --color-border: rgb(0 0 0 / 10%);
    --color-border-secondary: rgb(0 0 0 / 5%);
    --color-primary: #6366f1;
    --color-primary-hover: #4f46e5;
    --color-accent: #007aff;
    --color-accent-hover: #3b82f6;
    --color-success: #34c759;
    --color-warning: #f1930f;
    --color-danger: #ff3b30;
    --color-error: #cb2431;
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%);
    --shadow-md: 0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 6%);
    --shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 5%);
    --shadow-xl: 0 20px 25px rgb(0 0 0 / 10%), 0 10px 10px rgb(0 0 0 / 4%);
  }

  :root.dark,
  .dark,
  [data-theme='dark'] {
    --color-text-primary: #f5f5f7;
    --color-text-secondary: #a1a1a6;
    --color-text-tertiary: #86868b;
    --color-background-primary: #000000;
    --color-background-secondary: #1c1c1e;
    --color-background-tertiary: #2c2c2e;
    --color-surface: rgb(28 28 30 / 80%);
    --color-surface-elevated: rgb(44 44 46 / 95%);
    --color-border: rgb(255 255 255 / 10%);
    --color-border-secondary: rgb(255 255 255 / 5%);
    --color-primary: #6366f1;
    --color-primary-hover: #818cf8;
    --color-accent: #0a84ff;
    --color-accent-hover: #409cff;
    --color-success: #34c759;
    --color-warning: #f1930f;
    --color-danger: #ff3b30;
    --color-error: #cb2431;
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%);
    --shadow-md: 0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 6%);
    --shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 5%);
    --shadow-xl: 0 20px 25px rgb(0 0 0 / 10%), 0 10px 10px rgb(0 0 0 / 4%);
  }

  @keyframes badge-scroll {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-50%);
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: scale(0.8);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-10px);
    }
  }

  @keyframes badge-pulse {
    0%,
    100% {
      transform: scale(1);
      box-shadow: 0 2px 6px color-mix(in srgb, var(--color-accent) 60%, transparent);
    }

    50% {
      transform: scale(1.1);
      box-shadow: 0 2px 6px color-mix(in srgb, var(--color-accent) 60%, transparent);
    }
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  @keyframes slide-right {
    from {
      transform: translateX(100%);
      opacity: 0;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
}
