@import './styles/fonts.css' layer(base);
@import 'tailwindcss';
@config '../tailwind.config.js';

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {

  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@utility split {
  display: flex;
  flex-direction: row;
}


@layer base {

  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  html,
  :root {
    overscroll-behavior: none;
    /* Base colors */
    --background: 0 0% 99%;
    --foreground: 0 0% 12%;

    /* Card colors */
    --card: 0 0% 100%;
    --card-foreground: 0 0% 12%;

    /* Popover colors */
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 12%;

    /* Primary - Blue-navy for actions */
    --primary: 220 80% 35%;
    --primary-foreground: 0 0% 98%;

    /* Secondary - Subtle gray for supporting elements */
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 10%;

    /* Muted - Subtle background variations */
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;

    /* Accent - Subtle navy-tinted surfaces */
    --accent: 220 20% 96%;
    --accent-foreground: 220 25% 22%;

    /* Destructive - For warnings and errors */
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    /* Border and input styles */
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: var(--primary);

    /* Chart colors - Navy-first, then neutral steps */
    --chart-1: var(--primary);
    --chart-2: 220 10% 45%;
    --chart-3: 0 0% 50%;
    --chart-4: 0 0% 65%;
    --chart-5: 0 0% 82%;

    /* Scrollbar colors */
    --scrollbar-track: 0 0% 95% / 0.1;
    --scrollbar-thumb: 0 0% 80% / 0.4;
    --scrollbar-thumb-hover: 0 0% 70% / 0.6;
    /* Other variables */
    --radius: 0.5rem;
    --font-family: 'Inter', 'Noto Sans Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    --font-size: 16px;
    --line-height: 1.5;
    --letter-spacing: 0.02em;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 0 0% 26%;
    --sidebar-primary: 222 47% 20%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 0 0% 96%;
    --sidebar-accent-foreground: 0 0% 10%;
    --sidebar-border: 0 0% 88%;
    --sidebar-ring: 0 0% 40%;
  }

  .dark {
    --background: 0 0% 7%;
    --foreground: 0 0% 96%;

    --card: 0 0% 7%;
    --card-foreground: 0 0% 96%;

    --popover: 0 0% 7%;
    --popover-foreground: 0 0% 96%;

    --primary: 220 80% 64%;
    --primary-foreground: 0 0% 10%;

    --secondary: 0 0% 14%;
    --secondary-foreground: 0 0% 96%;

    --muted: 0 0% 14%;
    --muted-foreground: 0 0% 65%;

    --accent: 220 25% 18%;
    --accent-foreground: 0 0% 96%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 18%;
    --input: 0 0% 18%;
    --ring: var(--primary);
    /* Scrollbar colors for dark theme */
    --scrollbar-track: 0 0% 10% / 0.1;
    --scrollbar-thumb: 0 0% 25% / 0.4;
    --scrollbar-thumb-hover: 0 0% 35% / 0.6;
    --sidebar-background: 0 0% 10%;
    --sidebar-foreground: 0 0% 96%;
    --sidebar-primary: 220 80% 64%;
    --sidebar-primary-foreground: 0 0% 10%;
    --sidebar-accent: 0 0% 16%;
    --sidebar-accent-foreground: 0 0% 96%;
    --sidebar-border: 0 0% 16%;
    --sidebar-ring: 0 0% 60%;

    /* Chart colors - Navy-first for dark */
    --chart-1: var(--primary);
    --chart-2: 220 10% 70%;
    --chart-3: 0 0% 60%;
    --chart-4: 0 0% 42%;
    --chart-5: 0 0% 28%;
  }
}

@layer utilities {

  /* Scrollbar Styles */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background-color: hsla(var(--scrollbar-track));
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: hsla(var(--scrollbar-thumb));
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: hsla(var(--scrollbar-thumb-hover));
  }

  /* Show scrollbar for Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: hsla(var(--scrollbar-thumb)) hsla(var(--scrollbar-track));
  }

  /* Remove focus outline for mouse users but keep it for keyboard navigation */
  *:focus:not(:focus-visible) {
    outline: none;
  }

  *:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }

  body {
    @apply bg-background text-foreground;
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
  }
  
  /* Ensure inline code uses the same font stack so IPA glyphs render on mobile */
  code, kbd, samp {
    font-family: var(--font-family);
    font-variant-ligatures: none;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

.cm-scroller {
  position: absolute !important;
  inset: 0 !important;


  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.32s ease;

  &:hover {
    scrollbar-color: hsla(var(--scrollbar-thumb)) transparent;
    transition: scrollbar-color 0.32s ease;
  }

}

/* Optional: If you want to ensure the editor content fills the available space */
.cm-content {
  min-height: 100%;
  padding: 1rem 1rem 0 0 !important;
}

.smooth-scroll {
  scroll-behavior: smooth;
}

/* Add details content padding */
details> :not(summary) {
  margin-left: 1rem;
}

@utility scrollbar-thin {
  scrollbar-width: thin;

  &::-webkit-scrollbar {
    width: 6px;
  }
}

@utility scrollbar-thumb-gray-300 {
  &::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 6px;
  }
}

@utility scrollbar-thumb-gray-600 {
  &::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border-radius: 6px;
  }
}

@utility hide-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */

  &::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
  }
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#sentry-feedback {
  /* Add sentry feedback style */
  /* https://docs.sentry.io/platforms/javascript/guides/solid/user-feedback/configuration/ */
}