@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import 'katex/dist/katex.min.css';

@import 'tailwindcss';
@plugin "@tailwindcss/typography";

@config '../../tailwind.config.js';

@theme {
  /* =============================== */
  /* DESIGN TOKENS */
  /* =============================== */

  /* TODO: improve this */
  --color-brand: hsla(360, 99%, 69%, 1);
  --color-brand-500: hsla(359, 58%, 58%, 1);
  --color-red: hsla(0, 63%, 51%, 1);

  /* Generic tokens */
  --height-input: 59px;
  --z-max: 2147483647;

  /* Grayscale */
  --color-gray-100: #f7f5f5;
  --color-gray-200: #b2aeae;
  --color-gray-300: #938e8e;
  --color-gray-400: #666363;
  --color-gray-500: #3c3a3a;
  --color-gray-600: #2e2d2d;
  --color-gray-700: #212020;
  --color-gray-800: #262525;
  --color-gray-900: #1e1e1e;
  --color-gray-1000: #151414;
  --color-gray-1100: #0b0a0a;

  /* Brand - Rose Scale */
  --color-rose-100: #feefef;
  --color-rose-200: #fedfdf;
  --color-rose-300: #fe9190;
  --color-rose-400: #fe6162;
  --color-rose-500: #cb4d4e;
  --color-rose-600: #652627;
  --color-rose-700: #4c1d1d;

  /* Cyan
  /* --color-cyan-100: #e5fafd;
  --color-cyan-200: #ccf6fc;
  --color-cyan-300: #4ce0f5;
  --color-cyan-400: #00d3f2;
  --color-cyan-500: #00a8c1;
  --color-cyan-600: #005460;
  --color-cyan-700: #003f48; */

  /* Green Scale */
  /* --color-green-100: #e6fbf1;
  --color-green-200: #cdf8e3;
  --color-green-300: #50e89d;
  --color-green-400: #06df73;
  --color-green-500: #04b25c;
  --color-green-600: #02592e;
  --color-green-700: #014222; */

  /* Amber Scale */
  /* --color-yellow-100: #f7f1eb;
  --color-yellow-200: #efe4d7;
  --color-yellow-300: #c9a274;
  --color-yellow-400: #b27b39;
  --color-yellow-500: #8e622d;
  --color-yellow-600: #473116;
  --color-yellow-700: #352411; */

  /* Red Scale */
  /* --color-red-100: #f8eded;
  --color-red-200: #f2dbdb;
  --color-red-300: #d48282;
  --color-red-400: #c24d4d;
  --color-red-500: #9b3d3d;
  --color-red-600: #4d1e1e;
  --color-red-700: #3a1717; */

  /* Font */
  --font-inter: 'Inter', sans-serif;
  --font-clash: 'Clash Display', sans-serif;

  --font-size-em-xs: 0.75em;
  --font-size-em-sm: 0.875em;
  --font-size-em-base: 1em;
  --font-size-em-lg: 1.125em;
  --font-size-em-xl: 1.25em;
  --font-size-em-2xl: 1.5em;

  --font-family-inter:
    Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-family-clash:
    'Clash Display', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  /* Semantic Tokens */

  /* Text */
  --color-text-default: var(--color-gray-100);
  --color-text-secondary: var(--color-gray-200);
  --color-text-tertiary: var(--color-gray-300);

  /* Border */
  --color-border: var(--color-gray-700);
  --color-divider: var(--color-gray-600);
  --color-border-input: var(--color-gray-600);
  --color-border-input-focus: var(--color-gray-500);
  --color-border-input-secondary: var(--color-gray-500);
  --color-border-input-secondary-focus: var(--color-gray-400);

  /* Background */
  --color-bg-default: var(--color-gray-900);
  --color-bg-secondary: var(--color-gray-800);
  --color-bg-tertiary: var(--color-gray-700);
  --color-bg-quaternary: var(--color-gray-600);
  --color-bg-dark: var(--color-gray-1000);
  --color-bg-darker: var(--color-gray-1100);
  --color-bg-input: var(--color-gray-700);
  --color-bg-input-disabled: var(--color-gray-600);

  /* Placeholder */
  --color-text-placeholder: var(--color-gray-300);

  /* Animations */
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-breath: breath 5s ease-out infinite;
  --animate-big-bounce: big-bounce 1s infinite;
  --animate-shadow-pulse: shadow-pulse 2s infinite;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }

  @keyframes breath {
    from {
      opacity: 1;
    }
    to {
      opacity: 0.8;
    }
  }

  @keyframes big-bounce {
    0%,
    100% {
      transform: translateY(-75%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: translateY(0);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }

  @keyframes shadow-pulse {
    0% {
      box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.6);
    }
    100% {
      box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
  }

  @keyframes loaderDots {
    0% {
      opacity: 1;
    }
    50%,
    100% {
      opacity: 0.15;
    }
  }
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;

  @media (width >=896px) {
    & {
      max-width: 896px;
    }
  }
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-border-input, currentcolor);
  }

  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }

  html,
  body,
  #root {
    @apply font-inter bg-bg-default text-text-default h-full rounded-lg border-0;
  }

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

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

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

  ::-webkit-scrollbar-thumb {
    @apply rounded-full bg-gray-500;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-bg-default;
  }
}

/* markdown dot loader */
:where(.md-running):empty::after,
:where(.md-running) > :where(:not(ol):not(ul):not(pre)):last-child::after,
:where(.md-running) > pre:last-child code::after,
:where(.md-running)
  > :where(:is(ol, ul):last-child)
  > :where(li:last-child:not(:has(* > li)))::after,
:where(.md-running)
  > :where(:is(ol, ul):last-child)
  > :where(li:last-child)
  > :where(:is(ol, ul):last-child)
  > :where(li:last-child:not(:has(* > li)))::after,
:where(.md-running)
  > :where(:is(ol, ul):last-child)
  > :where(li:last-child)
  > :where(:is(ol, ul):last-child)
  > :where(li:last-child)
  > :where(:is(ol, ul):last-child)
  > :where(li:last-child)::after {
  @apply ml-1 animate-pulse font-sans text-[10px] text-gray-50 content-['\25CF'];
}

/* react tree view */
.p-checkbox {
  @apply h-[18px] w-[18px] shrink-0;
}
.p-checkbox .p-checkbox-box {
  @apply h-full w-full rounded-md;
}
.p-checkbox.p-highlight .p-checkbox-box {
  @apply bg-brand border-brand-500 hover:border-brand-500 p-0.5 text-white;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
  @apply bg-brand/10 text-white;
}
.icon-folder {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='shrink-0 mr-2 h-4 w-4' fill='none' height='16' viewBox='0 0 24 24' width='16'%3E%3Cpath d='M4.25 4C3.01625 4 2 5.01625 2 6.25V17.75C2 18.9838 3.01625 20 4.25 20H19.75C20.9838 20 22 18.9838 22 17.75V8.75C22 7.51625 20.9838 6.5 19.75 6.5H12.0215L9.78613 4.6377C9.29203 4.22606 8.66958 4 8.02637 4H4.25ZM4.25 5.5H8.02637C8.31915 5.5 8.60128 5.60268 8.82617 5.79004L10.5781 7.25L8.82617 8.70996C8.60128 8.89732 8.31915 9 8.02637 9H3.5V6.25C3.5 5.82675 3.82675 5.5 4.25 5.5ZM12.0215 8H19.75C20.1733 8 20.5 8.32675 20.5 8.75V17.75C20.5 18.1733 20.1733 18.5 19.75 18.5H4.25C3.82675 18.5 3.5 18.1733 3.5 17.75V10.5H8.02637C8.66958 10.5 9.29203 10.2739 9.78613 9.86231L12.0215 8Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
}
.icon-file {
  content: url("data:image/svg+xml,%3Csvg data-v-88732935='' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-file-text lucide-icon customizable'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'%3E%3C/path%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'%3E%3C/path%3E%3Cpath d='M10 9H8'%3E%3C/path%3E%3Cpath d='M16 13H8'%3E%3C/path%3E%3Cpath d='M16 17H8'%3E%3C/path%3E%3C/svg%3E");
}

.animate-accordion-down {
  animation: accordion-down 0.2s ease-out;
}

.animate-accordion-up {
  animation: accordion-up 0.2s ease-out;
}

.animate-breath {
  animation: breath 5s ease-out infinite;
}

.animate-big-bounce {
  animation: big-bounce 1s infinite;
}

.animate-shadow-pulse {
  animation: shadow-pulse 2s infinite;
}

/* Utility for translate-z */
.translate-z {
  --tw-translate-z: var(--value);
  transform: translate3d(
      var(--tw-translate-x),
      var(--tw-translate-y),
      var(--tw-translate-z)
    )
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
