@import 'tailwindcss';

:root {
  --color-surface: #ffffff;
  --color-surface-2: #f5f6f8;
  --color-surface-3: #e9ebef;
  --color-border: #e3e5ea;
  --color-text-primary: #14161a;
  --color-text-secondary: #4b5060;
  --color-text-tertiary: #868c9c;
  --color-accent: #3f5cf0;
  --color-accent-hover: #3249c9;
}

.dark {
  --color-surface: #14161c;
  --color-surface-2: #1b1e26;
  --color-surface-3: #262a35;
  --color-border: #2c303c;
  --color-text-primary: #f2f3f6;
  --color-text-secondary: #b6bac6;
  --color-text-tertiary: #7d8394;
  --color-accent: #6f8cff;
  --color-accent-hover: #8ba0ff;
}

@theme inline {
  --color-surface: var(--color-surface);
  --color-surface-2: var(--color-surface-2);
  --color-surface-3: var(--color-surface-3);
  --color-subtle: var(--color-border);
  --color-primary: var(--color-text-primary);
  --color-secondary: var(--color-text-secondary);
  --color-tertiary: var(--color-text-tertiary);
  --color-accent: var(--color-accent);
  --color-accent-hover: var(--color-accent-hover);
}

@layer base {
  * {
    border-color: var(--color-border);
  }
  html,
  body,
  #root {
    height: 100%;
  }
  body {
    background-color: var(--color-surface-2);
    color: var(--color-text-primary);
    font-family:
      'Inter',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      Helvetica,
      Arial,
      sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  ::selection {
    background-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-surface-3) transparent;
  }
  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  *::-webkit-scrollbar-thumb {
    background-color: var(--color-surface-3);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
}

@layer utilities {
  .bg-surface {
    background-color: var(--color-surface);
  }
  .bg-surface-2 {
    background-color: var(--color-surface-2);
  }
  .bg-surface-3 {
    background-color: var(--color-surface-3);
  }
  .bg-accent {
    background-color: var(--color-accent);
  }
  .hover\:bg-accent-hover:hover {
    background-color: var(--color-accent-hover);
  }
  .text-primary {
    color: var(--color-text-primary);
  }
  .text-secondary {
    color: var(--color-text-secondary);
  }
  .text-tertiary {
    color: var(--color-text-tertiary);
  }
  .text-accent {
    color: var(--color-accent);
  }
  .border-subtle {
    border-color: var(--color-border);
  }
  .bg-subtle {
    background-color: var(--color-border);
  }
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}