@import "tailwindcss";

@theme {
  --color-surface: var(--color-gray-900);
  --color-surface-hover: var(--color-gray-800);
  --color-surface-muted: oklch(from var(--color-gray-800) l c h / 40%);

  --color-border: var(--color-gray-800);
  --color-border-hover: var(--color-gray-700);
  --color-border-focus: var(--color-blue-500);

  --color-text-primary: var(--color-white);
  --color-text-secondary: var(--color-gray-400);
  --color-text-muted: var(--color-gray-500);

  --color-icon: var(--color-gray-400);
  --color-icon-muted: var(--color-gray-500);

  --color-primary: var(--color-blue-600);
  --color-primary-hover: var(--color-blue-500);

  --color-success: var(--color-green-900);
  --color-success-border: var(--color-green-800);

  --color-lang-gdscript: var(--color-blue-500);
  --color-lang-csharp: var(--color-green-500);
  --color-lang-rust: var(--color-orange-500);
  --color-lang-c: var(--color-gray-500);
  --color-lang-cpp: var(--color-pink-500);
  --color-lang-default: var(--color-gray-500);
}

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: dark;
  color: rgba(255, 255, 255, 0.87);
  /* background-color: #242424; */

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* a { */
/*   font-weight: 500; */
/*   color: #646cff; */
/*   text-decoration: inherit; */
/* } */
/* a:hover { */
/*   color: #535bf2; */
/* } */

/* body { */
/*   margin: 0; */
/*   display: flex; */
/*   place-items: center; */
/*   min-width: 320px; */
/*   min-height: 100vh; */
/* } */

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

.card {
  padding: 2em;
}

/* #app { */
/*   max-width: 1280px; */
/*   margin: 0 auto; */
/*   padding: 2rem; */
/*   text-align: center; */
/* } */

.header-title {
  font-family: 'Times New Roman';
}

.dropdown-item {
  display: flex;
  align-items: center;
  @apply h-10;
  @apply rounded-lg;
  @apply px-2 py-1;
  @apply hover:bg-gray-800;
}

button:default {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  /* transition: border-color 0.25s, background-color 0.2s; */
  color: #1a1b26
}

button:hover {
  cursor: pointer;
}

button:disabled {
  cursor: default;
  @apply bg-zinc-700
}

button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@keyframes grow-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

@keyframes grow-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

[data-dropdown-menu-content][data-state="open"] {
  animation: grow-in 150ms ease-out;
  transform-origin: top;
}

[data-dropdown-menu-content][data-state="closed"] {
  animation: grow-out 150ms ease-out;
  transform-origin: top;
}

[data-alert-dialog-content][data-state="open"] {
  animation: grow-in 150ms ease-out;
}

[data-alert-dialog-content][data-state="closed"] {
  animation: grow-out 150ms ease-out;
}

/* @media (prefers-color-scheme: light) { */
/*   :root { */
/*     color: #213547; */
/*     background-color: #ffffff; */
/*   } */
/**/
/*   a:default:hover { */
/*     color: #747bff; */
/*   } */
/**/
/*   button:default { */
/*     background-color: #f9f9f9; */
/*   } */
/* } */