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

@variant dark (&:where(.dark, .dark *));

@source "../../../libs/ui";
@source "../../../libs/shared";
@source "../../../libs/features";

@theme {
  /* Fonts */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Brand palette */
  --color-primary: #ffde59;
  --color-deep: #213f74;

  /* Deep Lens Navy */
  --color-deep-lens-navy-50: #e6edf5;
  --color-deep-lens-navy-100: #c3d1e4;
  --color-deep-lens-navy-200: #9ab4d2;
  --color-deep-lens-navy-300: #6b94be;
  --color-deep-lens-navy-400: #3c74a9;
  --color-deep-lens-navy-500: #213f74;
  --color-deep-lens-navy-600: #1a3260;
  --color-deep-lens-navy-700: #12244a;
  --color-deep-lens-navy-800: #0a1730;
  --color-deep-lens-navy-900: #040b14;

  /* Greyscale */
  --color-greyscale-0: #ffffff;
  --color-greyscale-25: #f8f9fa;
  --color-greyscale-50: #f3f4f5;
  --color-greyscale-100: #e6e7e9;
  --color-greyscale-200: #dcdde0;
  --color-greyscale-300: #c8c9cc;
  --color-greyscale-400: #a6a7aa;
  --color-greyscale-500: #86878a;
  --color-greyscale-600: #6a6b6e;
  --color-greyscale-700: #4e5053;
  --color-greyscale-800: #333538;
  --color-greyscale-900: #1f2022;

  /* Gray scale from your tailwind extension */
  --color-gray-50: #f9fafb;
  --color-gray-100: #ededed;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #262626;
  /* border */
  --color-gray-800: #1a1a1a;
  /* sidebar/surface */
  --color-gray-900: #121212;
  /* main background */

  /* Light scheme */
  --color-light-base: #ffffff;
  --color-light-surface: #f9fafb;
  --color-light-subtle: #e5e7eb;
  --color-light-text: #1f2937;
  --color-light-muted: #6b7280;

  /* Dark scheme derived from your dark colors */
  --color-dark-base: #121212;
  --color-dark-surface: #1a1a1a;
  --color-dark-subtle: #262626;
  --color-dark-text: #f9fafb;
  --color-dark-muted: #9ca3af;
}

@layer base {
  button {
    cursor: pointer;
  }

  button:disabled,
  button[disabled] {
    cursor: not-allowed;
  }
}

body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

/* Utilities for hiding scrollbars */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Global Scrollbar Theme (Light) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 5px;
  border: 2px solid #f5f5f5;
}

::-webkit-scrollbar-thumb:hover {
  background: #c2c2c2;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #d4d4d4 #f5f5f5;
}

/* Dark mode scrollbar overrides */
html.dark {
  color-scheme: dark;
  background-color: #121212;
}

html.dark ::-webkit-scrollbar-track {
  background: #121212;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 99px;
  border: 2px solid #121212;
  background-clip: content-box;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

html.dark * {
  scrollbar-color: #4b5563 #121212;
}

/* Scoped scrollbar for AI Generations & Dropdowns (refined) */
.generations-scroll {
  scrollbar-width: thin;
  scrollbar-color: #d6d6d6 #f5f5f5;
}

.generations-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.generations-scroll::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 4px;
}

.generations-scroll::-webkit-scrollbar-thumb {
  background: #d6d6d6;
  border-radius: 4px;
}

.generations-scroll::-webkit-scrollbar-thumb:hover {
  background: #c5c5c5;
}

/* Dark mode scoped scrollbar */
html.dark .generations-scroll {
  scrollbar-color: #4b5563 transparent;
}

html.dark .generations-scroll::-webkit-scrollbar-track {
  background: transparent;
}

html.dark .generations-scroll::-webkit-scrollbar-thumb {
  background: #4b5563;
}