@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ---------------------------------------------------------------------------
 * Desktop chat design tokens.
 *
 * `--bg-rgb / --fg-rgb / --accent-rgb` are *space-separated rgb triplets*
 * (no `rgb(...)` wrapper) so Tailwind's `rgb(var(--x) / <alpha-value>)`
 * alpha modifier works (e.g. `bg-surface/40`).
 *
 * `--line` is a full color value with baked-in alpha — theme decides whether
 * borders are inked-on-white or white-on-ink.
 * ------------------------------------------------------------------------- */

:root {
  --bg-rgb: 246 247 250;
  --bg-2-rgb: 235 237 242;
  --bg-3-rgb: 255 255 255;
  --fg-rgb: 24 25 28;
  --fg-muted-rgb: 91 95 104;
  --accent-rgb: 88 101 242;
  --accent-fg-rgb: 255 255 255;
  --line: rgba(24, 25, 28, 0.1);
  color-scheme: light;
}

.dark {
  --bg-rgb: 30 31 34;
  --bg-2-rgb: 43 45 49;
  --bg-3-rgb: 49 51 56;
  --fg-rgb: 242 243 245;
  --fg-muted-rgb: 148 155 164;
  --accent-rgb: 88 101 242;
  --accent-fg-rgb: 255 255 255;
  --line: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}

@layer base {
  html,
  body,
  #root {
    height: 100%;
  }

  body {
    @apply bg-surface text-fg font-sans antialiased;
    font-feature-settings: 'cv11', 'ss01';
  }

  * {
    scrollbar-color: rgb(var(--fg-muted-rgb) / 0.36) transparent;
  }

  ::-webkit-scrollbar {
    height: 10px;
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgb(var(--fg-muted-rgb) / 0.28);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--fg-muted-rgb) / 0.44);
    border: 3px solid transparent;
    background-clip: padding-box;
  }

  ::selection {
    @apply bg-accent/40 text-white;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer utilities {
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
  .bg-grid {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: -1px -1px;
  }
  .discord-panel {
    background: rgb(var(--bg-2-rgb) / 0.94);
    border-color: var(--line);
  }
  .dark .discord-rail {
    background: #1e1f22;
  }
  .dark .discord-chat-panel {
    background: #2b2d31;
  }
  .dark .discord-chat-surface {
    background: #313338;
  }
  .dark .discord-composer {
    background: #383a40;
  }
  /* Glass pill used for the fullscreen call controls bar. */
  .glass-pill {
    background: rgba(10, 10, 15, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .glass-chip {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    color: #fff;
  }
}