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

/* Fallback styles if Tailwind CDN fails or for custom overrides */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--app-bg);
  color: #f1f5f9;
  min-height: 100vh;
}

@layer utilities {
  .bg-assigned-texture {
    background-image: repeating-linear-gradient(
      135deg,
      rgba(249, 115, 22, 0.1),
      rgba(249, 115, 22, 0.1) 10px,
      transparent 10px,
      transparent 20px
    ) !important;
  }

  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) transparent;
  }

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

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

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 10px;
    opacity: 0.3;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
    opacity: 0.5;
  }

  .prose {
    color: inherit;
  }

  .prose h1,
  .prose h2,
  .prose h3 {
    color: rgb(241, 245, 249);
    font-weight: 700;
  }

  .prose code {
    color: rgb(209, 213, 219);
    background-color: var(--card-bg);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
  }

  .prose pre {
    background-color: var(--card-bg);
    border: 1px solid var(--border-main);
    border-radius: 0.5rem;
  }

  .prose a {
    color: var(--accent-color);
  }

  .prose a:hover {
    text-decoration: underline;
  }

  .prose strong {
    color: rgb(241, 245, 249);
  }
}

/* Theme Support */
:root {
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-850: #161e2e;
  --slate-900: #0f172a;
  --slate-950: #020617;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --text-main: #f1f5f9;
  
  /* Dynamic Theme Variables */
  --app-bg: var(--slate-950);
  --card-bg: var(--slate-900);
  --sidebar-bg: rgba(15, 23, 42, 0.5);
  --header-bg: var(--slate-950);
  --border-main: var(--slate-800);
  --border-light: rgba(148, 163, 184, 0.1);
  --accent-color: var(--indigo-600);
}

body.theme-dark {
  --app-bg: #020617;
  --card-bg: #0f172a;
  --sidebar-bg: rgba(15, 23, 42, 0.5);
  --header-bg: #020617;
  --border-main: #1e293b;
  --border-light: rgba(148, 163, 184, 0.1);
  --accent-color: #6366f1;
  --text-main: #f1f5f9;
}

body.theme-light {
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #cbd5e1;
  --slate-800: #e2e8f0;
  --slate-850: #f1f5f9;
  --slate-900: #f8fafc;
  --slate-950: #ffffff;
  --indigo-400: #6366f1;
  --indigo-500: #4f46e5;
  --indigo-600: #4338ca;
  --text-main: #0f172a;
  
  --app-bg: #f8fafc;
  --card-bg: #ffffff;
  --sidebar-bg: rgba(241, 245, 249, 0.5);
  --header-bg: #ffffff;
  --border-main: #e2e8f0;
  --border-light: rgba(15, 23, 42, 0.05);
  --accent-color: #4f46e5;
}

body.theme-indigo {
  --slate-500: #818cf8;
  --slate-600: #6366f1;
  --slate-700: #4338ca;
  --slate-800: #3730a3;
  --slate-850: #312e81;
  --slate-900: #1e1b4b;
  --slate-950: #1e1b4b;
  --indigo-400: #a5b4fc;
  --indigo-500: #818cf8;
  --indigo-600: #6366f1;
  --text-main: #e0e7ff;
  
  --app-bg: #1e1b4b;
  --card-bg: #312e81;
  --sidebar-bg: rgba(30, 27, 75, 0.5);
  --header-bg: #1e1b4b;
  --border-main: #4338ca;
  --border-light: rgba(165, 180, 252, 0.1);
  --accent-color: #6366f1;
}

body.theme-rose {
  --slate-500: #f43f5e;
  --slate-600: #e11d48;
  --slate-700: #be123c;
  --slate-800: #9f1239;
  --slate-850: #881337;
  --slate-900: #4c0519;
  --slate-950: #2d0612;
  --indigo-400: #fb7185;
  --indigo-500: #f43f5e;
  --indigo-600: #e11d48;
  --text-main: #ffe4e6;
  
  --app-bg: #2d0612;
  --card-bg: #4c0519;
  --sidebar-bg: rgba(136, 19, 55, 0.5);
  --header-bg: #2d0612;
  --border-main: #be123c;
  --border-light: rgba(251, 113, 133, 0.1);
  --accent-color: #e11d48;
}

body.theme-emerald {
  --slate-500: #10b981;
  --slate-600: #059669;
  --slate-700: #047857;
  --slate-800: #065f46;
  --slate-850: #064e3b;
  --slate-900: #022c22;
  --slate-950: #011c16;
  --indigo-400: #34d399;
  --indigo-500: #10b981;
  --indigo-600: #059669;
  --text-main: #ecfdf5;
  
  --app-bg: #011c16;
  --card-bg: #022c22;
  --sidebar-bg: rgba(6, 78, 59, 0.5);
  --header-bg: #011c16;
  --border-main: #047857;
  --border-light: rgba(52, 211, 153, 0.1);
  --accent-color: #059669;
}

body.theme-slate {
  --slate-500: #94a3b8;
  --slate-600: #64748b;
  --slate-700: #475569;
  --slate-800: #334155;
  --slate-850: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #0b1120;
  --indigo-400: #94a3b8;
  --indigo-500: #64748b;
  --indigo-600: #475569;
  --text-main: #f1f5f9;
  
  --app-bg: #0b1120;
  --card-bg: #0f172a;
  --sidebar-bg: rgba(30, 41, 59, 0.5);
  --header-bg: #0b1120;
  --border-main: #334155;
  --border-light: rgba(148, 163, 184, 0.1);
  --accent-color: #475569;
}

body {
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  background-color: var(--app-bg);
  color: var(--text-main);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* Common text overrides for light themes */
body.theme-light .text-white {
  color: #0f172a !important;
}

body.theme-light .text-slate-200,
body.theme-light .text-slate-300,
body.theme-light .text-slate-400 {
  color: #475569 !important;
}