/* Scoped observability theme - only affects pages wrapped with .obs-v2 */
@import "../styles/obs-theme.css";

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

@layer base {
  :root {
    /* Background and foreground */
    --background: 0 0% 99%;
    --foreground: 222.2 84% 4.9%;

    /* Card styles */
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    /* Popover styles */
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    /* Codeflash primary colors - converted from hex to HSL */
    --primary: 38 100% 63%; /* #d08e0d - Codeflash yellow */
    --primary-foreground: 0 6% 4%;

    /* Secondary colors - complementary to Codeflash yellow */
    --secondary: 41 88% 95%; /* Lighter version of primary */
    --secondary-foreground: 41 88% 20%; /* Darker version for contrast */

    /* Accent colors - variation of the Codeflash yellow */
    --accent: 41 70% 90%; /* Softer version of primary */
    --accent-foreground: 41 88% 20%;

    /* Other UI colors aligned with brand */
    --muted: 41 20% 96%;
    --muted-foreground: 41 8% 46%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 41 30% 90%;
    --input: 41 30% 90%;
    --ring: 38 100% 63%; /* Matching primary - Codeflash yellow */

    --radius: 0.5rem;

    /* Code highlighting */
    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  }

  .dark {
    /* Background and foreground */
    --background: 0, 6%, 5%;
    --foreground: 0 0% 100%;

    /* Card styles */
    --card: 0 3% 11%;
    --card-foreground: 0 0% 100%;

    /* Popover styles */
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 0 0% 100%;

    /* Codeflash primary colors for dark mode */
    --primary: 38 100% 63%; /* #ffd227 - Codeflash yellow for dark mode */
    --primary-foreground: 222.2 47.4% 11.2%;

    /* Secondary colors - complementary to Codeflash yellow in dark mode */
    --secondary: 48 60% 25%; /* Darker version of primary */
    --secondary-foreground: 48 100% 80%; /* Lighter version for contrast */

    /* Accent colors - variation of the Codeflash yellow */
    --accent: 48 70% 30%; /* Softer version of primary */
    --accent-foreground: 48 100% 80%;

    /* Other UI colors aligned with brand */
    --muted: 48 15% 20%;
    --muted-foreground: 48 20% 65%;

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

    --border: 48 20% 25%;
    --input: 48 20% 25%;
    --ring: 38 100% 63%; /* Matching primary - Codeflash yellow */

    /* Code highlighting */
    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
  }
}

@layer base {
  ::selection {
    background: #ffd227; /* CF brand color */
    color: #1f2937; /* Tailwind's gray-800 for selected text color */
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Add this to your existing styles */
.transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

.language-python {
  background: transparent !important;
  color: inherit !important;
  text-shadow: none !important;
}

/* app/globals.css - Update the list styles */
.prose {
  color: inherit;
}

.prose p {
  margin: 0.5em 0;
}

.prose strong {
  font-weight: 600;
}

.prose em {
  font-style: italic;
}

.prose code {
  background-color: hsl(var(--muted));
  padding: 0.125em 0.25em;
  border-radius: 0.25em;
  font-size: 0.875em;
  font-family: ui-monospace, monospace;
}

.prose pre {
  margin: 0.5em 0;
}

.prose pre code {
  display: block;
  padding: 0.75em;
  overflow-x: auto;
}

.prose blockquote {
  border-left: 3px solid hsl(var(--border));
  padding-left: 1em;
  margin-left: 0;
  color: hsl(var(--muted-foreground));
}

/* Fixed list styles to show bullets and numbers */
.prose ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
  list-style-type: disc;
  list-style-position: outside;
}

.prose ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
  list-style-type: decimal;
  list-style-position: outside;
}

.prose li {
  margin: 0.25em 0;
  display: list-item;
}

/* Nested lists */
.prose ul ul {
  list-style-type: circle;
}

.prose ul ul ul {
  list-style-type: square;
}

.prose ol ol {
  list-style-type: lower-alpha;
}

.prose a {
  color: hsl(var(--primary));
  text-decoration: underline;
}

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

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-weight: 600;
  margin: 1em 0 0.5em;
}

.prose h1 {
  font-size: 1.5em;
}
.prose h2 {
  font-size: 1.25em;
}
.prose h3 {
  font-size: 1.1em;
}

/* Task lists */
.prose input[type="checkbox"] {
  margin-right: 0.5em;
}

/* Dark mode adjustments */
.dark .prose code {
  background-color: hsl(var(--muted));
}

.dark .prose blockquote {
  border-left-color: hsl(var(--border));
  color: hsl(var(--muted-foreground));
}
