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

@layer base {
  :root {
    /* Base colors matching Fern docs - light mode uses dark text on light background */
    --background: 210 67% 98.8%;
    /* #FAFCFE converted to HSL */
    --background-solid: 210 67% 98.8%;
    --background-alpha-10: 210 67% 98.8% / 0.1;
    --background-alpha-20: 210 67% 98.8% / 0.2;
    --background-alpha-30: 210 67% 98.8% / 0.3;
    --background-alpha-40: 210 67% 98.8% / 0.4;
    --background-alpha-50: 210 67% 98.8% / 0.5;
    --background-alpha-60: 210 67% 98.8% / 0.6;
    --background-alpha-70: 210 67% 98.8% / 0.7;
    --background-alpha-80: 210 67% 98.8% / 0.8;
    --background-alpha-90: 210 67% 98.8% / 0.9;

    --foreground: 0 0% 2.4%;
    /* #060606 converted to HSL - dark text in light mode */

    /* Card with pure white for light mode */
    --card: 0 0% 100% / 0.95;
    --card-solid: 0 0% 100%;
    --card-foreground: 0 0% 2.4%;

    /* Popover with pure white for light mode */
    --popover: 0 0% 100% / 0.98;
    --popover-solid: 0 0% 100%;
    --popover-foreground: 0 0% 2.4%;

    --primary: 207 83% 49%;
    /* #1692E5 - Blue primary color */
    --primary-foreground: 0 0% 100%;
    /* White text on blue primary */

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

    /* Muted with light gray for proper contrast in light mode */
    --muted: 0 0% 96%;
    --muted-solid: 0 0% 96%;
    --muted-foreground: 0 0% 25%;

    /* Accent with light gray for proper hover contrast in light mode */
    --accent: 0 0% 96% / 0.9;
    --accent-solid: 0 0% 96%;
    --accent-foreground: 0 0% 2.4%;

    /* Blue accent colors using #1692E5 */
    --blue: 207 83% 49%;
    /* #1692E5 converted to HSL */
    --blue-foreground: 0 0% 100%;
    --blue-50: 207 83% 95%;
    --blue-100: 207 83% 90%;
    --blue-200: 207 83% 80%;
    --blue-300: 207 83% 70%;
    --blue-400: 207 83% 60%;
    --blue-500: 207 83% 49%;
    --blue-600: 207 83% 40%;
    --blue-700: 207 83% 30%;
    --blue-800: 207 83% 20%;
    --blue-900: 207 83% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 67% 98.8%;

    --border: 0 0% 88%;
    --input: 0 0% 100%;
    --ring: 0 0% 2.4% / 0.6;

    --radius: 0.5rem;

    /* Brand colors */
    --brand-lime: 92 80% 45%;
    /* #C1F297 - Tertiary Brand Color */
    --brand-yellow: 54 100% 45%;
    /* #F1EEEA - Secondary Brand Color */

    --highlight: 0 0% 75%;
    --highlight-foreground: 0 0% 2.4%;
    --highlight-100: 0 0% 100%;
    --highlight-200: 0 0% 98%;
    --highlight-300: 0 0% 95%;
    --highlight-400: 0 0% 90%;
    --highlight-500: 0 0% 85%;

    /* Sidebar with light gray for proper contrast in light mode */
    --sidebar-background: 0 0% 100% / 0.95;
    --sidebar-background-solid: 0 0% 100%;
    --sidebar-foreground: 0 0% 2.4%;
    --sidebar-primary: 0 0% 2.4%;
    --sidebar-primary-foreground: 210 67% 98.8%;
    --sidebar-accent: 0 0% 96% / 0.9;
    --sidebar-accent-solid: 0 0% 96%;
    --sidebar-accent-foreground: 0 0% 2.4%;
    --sidebar-border: 0 0% 88%;
    --sidebar-ring: 0 0% 2.4%;
  }

  .dark {
    /* Base colors matching Fern docs - dark mode uses light text on dark background */
    --background: 0 0% 2.4%;
    /* #060606 converted to HSL */
    --background-solid: 0 0% 2.4%;
    --background-alpha-10: 0 0% 2.4% / 0.1;
    --background-alpha-20: 0 0% 2.4% / 0.2;
    --background-alpha-30: 0 0% 2.4% / 0.3;
    --background-alpha-40: 0 0% 2.4% / 0.4;
    --background-alpha-50: 0 0% 2.4% / 0.5;
    --background-alpha-60: 0 0% 2.4% / 0.6;
    --background-alpha-70: 0 0% 2.4% / 0.7;
    --background-alpha-80: 0 0% 2.4% / 0.8;
    --background-alpha-90: 0 0% 2.4% / 0.9;

    --foreground: 210 67% 98.8%;
    /* #FAFCFE converted to HSL - light text in dark mode */

    /* Card with transparency */
    --card: 0 0% 5% / 0.7;
    --card-solid: 0 0% 5%;
    --card-foreground: 210 67% 98.8%;

    /* Popover with transparency */
    --popover: 0 0% 5% / 0.92;
    --popover-solid: 0 0% 5%;
    --popover-foreground: 210 67% 98.8%;

    --primary: 207 83% 49%;
    /* #1692E5 - Same blue primary in dark mode */
    --primary-foreground: 0 0% 100%;
    /* White text on blue primary */

    --secondary: 0 0% 8%;
    --secondary-foreground: 210 67% 98.8%;

    /* Muted with transparency */
    --muted: 0 0% 8%;
    --muted-solid: 0 0% 8%;
    --muted-foreground: 0 0% 70%;

    /* Accent with transparency */
    --accent: 0 0% 10% / 0.7;
    --accent-solid: 0 0% 10%;
    --accent-foreground: 210 67% 98.8%;

    /* Blue accent colors using #1692E5 - same blue in dark mode */
    --blue: 207 83% 49%;
    /* #1692E5 converted to HSL */
    --blue-foreground: 0 0% 100%;
    --blue-50: 207 83% 10%;
    --blue-100: 207 83% 15%;
    --blue-200: 207 83% 20%;
    --blue-300: 207 83% 30%;
    --blue-400: 207 83% 40%;
    --blue-500: 207 83% 49%;
    --blue-600: 207 83% 60%;
    --blue-700: 207 83% 70%;
    --blue-800: 207 83% 80%;
    --blue-900: 207 83% 90%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 67% 98.8%;

    --border: 0 0% 15%;
    --input: 0 0% 8%;
    --ring: 210 67% 98.8% / 0.6;

    /* Brand colors */
    --brand-lime: 92 78% 77%;
    /* #C1F297 - True brand color for dark mode */
    --brand-yellow: 54 100% 45%;
    /* #F1EEEA - True brand color for dark mode */

    --highlight: 0 0% 20%;
    --highlight-foreground: 210 67% 98.8%;
    --highlight-100: 0 0% 3%;
    --highlight-200: 0 0% 7%;
    --highlight-300: 0 0% 12%;
    --highlight-400: 0 0% 18%;
    --highlight-500: 0 0% 25%;

    /* Sidebar with transparency */
    --sidebar-background: 0 0% 4% / 0.8;
    --sidebar-background-solid: 0 0% 4%;
    --sidebar-foreground: 210 67% 98.8%;
    --sidebar-primary: 210 67% 98.8%;
    --sidebar-primary-foreground: 0 0% 2.4%;
    --sidebar-accent: 0 0% 8% / 0.7;
    --sidebar-accent-solid: 0 0% 8%;
    --sidebar-accent-foreground: 210 67% 98.8%;
    --sidebar-border: 0 0% 15%;
    --sidebar-ring: 210 67% 98.8%;
  }
}

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

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

/* Shared dropdown hover utility */
.dropdown-item-hover {
  @apply transition-colors duration-200 hover:bg-slate-100 dark:hover:bg-slate-800;
}

.sidebar-nav-item {
  @apply relative transition-all duration-200 ease-in-out;
}

.light .sidebar-nav-item {
  background: linear-gradient(109.6deg, hsl(var(--blue-100) / 0.1) 11.2%, hsl(var(--blue-50) / 0.1) 91.1%);
}

.light .sidebar-nav-item:hover {
  @apply transform scale-[1.02];
  background: linear-gradient(109.6deg, hsl(var(--blue-200) / 0.2) 11.2%, hsl(var(--blue-100) / 0.2) 91.1%);
}

.light .sidebar-nav-item.active {
  background: linear-gradient(109.6deg, hsl(var(--blue-300) / 0.3) 11.2%, hsl(var(--blue-200) / 0.3) 91.1%);
}

.light .sidebar-nav-item::before {
  content: '';
  @apply absolute inset-0 rounded-md opacity-0 transition-opacity duration-200;
  background: linear-gradient(109.6deg, hsl(var(--blue-400) / 0.4) 11.2%, hsl(var(--blue-300) / 0.4) 91.1%);
}

.light .sidebar-nav-item:hover::before {
  @apply opacity-100;
}

.dark .sidebar-nav-item {
  background: linear-gradient(109.6deg, hsl(var(--blue-100) / 0.1) 11.2%, hsl(var(--blue-200) / 0.1) 91.1%);
}

.dark .sidebar-nav-item:hover {
  @apply transform scale-[1.02];
  background: linear-gradient(109.6deg, hsl(var(--blue-200) / 0.2) 11.2%, hsl(var(--blue-300) / 0.2) 91.1%);
}

.dark .sidebar-nav-item.active {
  background: linear-gradient(109.6deg, hsl(var(--blue-300) / 0.3) 11.2%, hsl(var(--blue-400) / 0.3) 91.1%);
}

.dark .sidebar-nav-item::before {
  content: '';
  @apply absolute inset-0 rounded-md opacity-0 transition-opacity duration-200;
  background: linear-gradient(109.6deg, hsl(var(--blue-400) / 0.4) 11.2%, hsl(var(--blue-500) / 0.4) 91.1%);
}

.dark .sidebar-nav-item:hover::before {
  @apply opacity-100;
}

/* Custom scrollbar styles for raw data viewer */
/* Target both the element itself and its children */
.raw-data-scrollbar::-webkit-scrollbar,
.raw-data-scrollbar ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.raw-data-scrollbar::-webkit-scrollbar-track,
.raw-data-scrollbar ::-webkit-scrollbar-track {
  background: transparent;
}

.raw-data-scrollbar::-webkit-scrollbar-thumb,
.raw-data-scrollbar ::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.3);
  border-radius: 4px;
  transition: background 0.2s;
}

.raw-data-scrollbar::-webkit-scrollbar-thumb:hover,
.raw-data-scrollbar ::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.5);
}

.dark .raw-data-scrollbar::-webkit-scrollbar-thumb,
.dark .raw-data-scrollbar ::-webkit-scrollbar-thumb {
  background: rgba(107, 114, 128, 0.4);
}

.dark .raw-data-scrollbar::-webkit-scrollbar-thumb:hover,
.dark .raw-data-scrollbar ::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.6);
}

/* Firefox scrollbar support */
.raw-data-scrollbar,
.raw-data-scrollbar * {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}

.dark .raw-data-scrollbar,
.dark .raw-data-scrollbar * {
  scrollbar-color: rgba(107, 114, 128, 0.4) transparent;
}
