@import "tailwindcss";
@import "tw-animate-css";

@plugin "@tailwindcss/typography";
@plugin "tailwindcss-animate";

@custom-variant dark (&:is(.dark *));

@layer base {
	* {
		@supports (color: color-mix(in lab, red, red)) {
			outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
		}
	}

	* {
		border-color: var(--border);
		outline-color: var(--ring);
	}
}

/* Awesome Gradient Text - Dynamic theme support */
.gradient-text, .prose h1 {
  background: var(--gradient-awesome);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-pink, .prose h2 {
  background: linear-gradient(135deg, var(--theme-secondary-dark) 0%, var(--theme-primary) 50%, var(--theme-primary-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-gold {
  background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-secondary) 50%, var(--theme-secondary-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Awesome Button - Dynamic theme support */
.btn-awesome {
  @apply relative overflow-hidden rounded-lg px-6 py-3 font-semibold text-white transition-all duration-300;
  background: var(--gradient-awesome);
  box-shadow: 0 4px 15px 0 color-mix(in oklab, var(--primary) 40%, transparent);
}

.bg-gradient-awesome {
  background: var(--gradient-awesome);
}

.btn-awesome:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px 0 color-mix(in oklab, var(--primary) 60%, transparent);
}

.btn-awesome:active {
  transform: translateY(0);
}

/* Awesome Icon - Smooth theme transitions */
.awesome-icon {
  transition: all 0.3s ease-in-out;
}

.awesome-icon path,
.awesome-icon circle {
  transition: fill 0.3s ease-in-out;
}

/* Gradient Stroke Icons */
.icon-gradient-primary {
  stroke: url(#gradient-primary);
}

.icon-gradient-secondary {
  stroke: url(#gradient-secondary);
}

.icon-gradient-accent {
  stroke: url(#gradient-accent);
}

.icon-gradient-awesome {
  stroke: url(#gradient-awesome);
}

/* Awesome Card */
.card-awesome {
  @apply rounded-lg border-2 transition-all duration-300;
  border-color: color-mix(in oklab, var(--primary) 20%, transparent);
}

.card-awesome:hover {
  border-color: color-mix(in oklab, var(--primary) 60%, transparent);
  box-shadow: 0 8px 30px color-mix(in oklab, var(--primary) 30%, transparent);
  transform: translateY(-2px);
}

/* Shimmer Effect */
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  background-size: 1000px 100%;
  animation: shimmer 2s linear infinite;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: color-mix(in oklab, var(--foreground) 5%, transparent);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-awesome);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--theme-secondary-dark) 0%, var(--theme-primary) 50%, var(--theme-primary-dark) 100%);
}

/* Code Block Styling */
pre {
  @apply rounded-lg border border-primary/20 bg-gray-50 dark:bg-gray-900;
  padding: 1.5rem;
  overflow-x: auto;
}

pre code {
  @apply text-sm;
  background: none !important;
  padding: 0 !important;
}

/* Prose/Typography Customization for README */
.prose {
  --tw-prose-body: var(--foreground);
  --tw-prose-headings: var(--foreground);
  --tw-prose-links: var(--primary);
  --tw-prose-bold: var(--foreground);
  --tw-prose-code: var(--primary);
  --tw-prose-pre-bg: var(--muted);
  --tw-prose-quotes: var(--muted-foreground);
  --tw-prose-quote-borders: var(--primary);
  --tw-prose-hr: var(--border);
  --tw-prose-th-borders: var(--border);
  --tw-prose-td-borders: var(--border);
}

.prose h1 {
  @apply border-b border-border pb-2 mt-8 mb-4 text-4xl font-bold;
}

.prose h2 {
  @apply border-b border-border/50 pb-2 mt-6 mb-3 text-3xl font-semibold;
}

.prose h3 {
  @apply text-primary mt-5 mb-2 text-2xl font-semibold;
}

.prose h4 {
  @apply text-foreground mt-4 mb-2 text-xl font-semibold;
}

.prose a {
  @apply text-primary underline decoration-primary/30 underline-offset-2 transition-colors hover:text-primary/80 hover:decoration-primary/60;
}

.prose code {
  @apply rounded bg-primary/10 px-1.5 py-0.5 text-sm font-mono text-primary;
}

.prose pre {
  @apply rounded-lg border border-primary/20 bg-muted p-4 overflow-x-auto;
}

.prose pre code {
  @apply bg-transparent p-0 text-sm;
}

.prose blockquote {
  @apply border-l-4 border-primary pl-4 italic text-muted-foreground;
}

.prose table {
  @apply w-full border-collapse;
}

.prose th {
  @apply border border-border bg-muted px-4 py-2 text-left font-semibold;
}

.prose td {
  @apply border border-border px-4 py-2;
}

.prose img {
  @apply rounded-lg border border-border shadow-sm;
}

.prose ul, .prose ol {
  @apply my-4;
}

.prose li {
  @apply my-2;
}

.prose hr {
  @apply my-8 border-border;
}

/* Kbd Styling */
kbd {
  @apply inline-flex items-center justify-center rounded border border-primary/30 bg-primary/10 px-2 py-1 font-mono text-xs font-semibold text-primary;
  box-shadow: 0 2px 0 0 color-mix(in oklab, var(--primary) 20%, transparent);
}

/* Selection */
::selection {
  background: color-mix(in oklab, var(--primary) 30%, transparent);
  color: inherit;
}

/* Search Highlight - Discreet styling */
mark {
  background: color-mix(in oklab, var(--primary) 15%, transparent);
  color: var(--primary);
  font-weight: 600;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  border-bottom: 2px solid color-mix(in oklab, var(--primary) 40%, transparent);
}

.dark mark {
  background: color-mix(in oklab, var(--primary) 20%, transparent);
  color: var(--primary-foreground);
}

/* Loading Spinner */
@keyframes spin-awesome {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner-awesome {
  border: 3px solid color-mix(in oklab, var(--primary) 10%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin-awesome 0.8s linear infinite;
}

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* Tailwind v4 theme color definitions */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.625rem;

  /* Base colors in OKLCH */
  --background: oklch(1 0 0);
  --foreground: oklch(0.2 0.01 286);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.01 286);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0.01 286);

  /* Awesome Purple - Primary */
  --primary: oklch(0.62 0.28 310);
  --primary-foreground: oklch(0.98 0.01 286);

  /* Awesome Pink - Secondary */
  --secondary: oklch(0.72 0.19 345);
  --secondary-foreground: oklch(0.15 0.01 286);

  /* Muted colors */
  --muted: oklch(0.96 0.005 286);
  --muted-foreground: oklch(0.5 0.02 286);

  /* Awesome Gold - Accent */
  --accent: oklch(0.88 0.18 95);
  --accent-foreground: oklch(0.15 0.01 286);

  /* Destructive */
  --destructive: oklch(0.62 0.25 25);
  --destructive-foreground: oklch(0.98 0.01 286);

  /* Borders and inputs */
  --border: oklch(0.9 0.005 286);
  --input: oklch(0.9 0.005 286);
  --ring: oklch(0.62 0.28 310);

  /* Chart colors */
  --chart-1: oklch(0.7 0.19 35);
  --chart-2: oklch(0.65 0.15 200);
  --chart-3: oklch(0.5 0.12 250);
  --chart-4: oklch(0.85 0.16 100);
  --chart-5: oklch(0.8 0.18 80);

  /* Sidebar */
  --sidebar: oklch(0.98 0.005 286);
  --sidebar-foreground: oklch(0.2 0.01 286);
  --sidebar-primary: oklch(0.62 0.28 310);
  --sidebar-primary-foreground: oklch(0.98 0.01 286);
  --sidebar-accent: oklch(0.96 0.005 286);
  --sidebar-accent-foreground: oklch(0.2 0.01 286);
  --sidebar-border: oklch(0.9 0.005 286);
  --sidebar-ring: oklch(0.62 0.28 310);

  /* Dynamic theme colors (set by ThemeSwitcher) - converted to OKLCH */
  --theme-primary: oklch(0.62 0.28 310);
  --theme-primary-light: oklch(0.70 0.27 310);
  --theme-primary-dark: oklch(0.54 0.26 295);
  --theme-secondary: oklch(0.72 0.19 345);
  --theme-secondary-light: oklch(0.82 0.14 345);
  --theme-secondary-dark: oklch(0.62 0.24 340);
  --theme-accent: oklch(0.88 0.18 95);
  --theme-accent-light: oklch(0.92 0.16 95);
  --theme-accent-dark: oklch(0.84 0.20 95);
  --gradient-awesome: linear-gradient(135deg, oklch(0.62 0.28 310) 0%, oklch(0.54 0.26 295) 50%, oklch(0.88 0.18 95) 100%);

  /* Awesome-specific (for compatibility) */
  --awesome-purple: oklch(0.62 0.28 310);
  --awesome-pink: oklch(0.72 0.19 345);
  --awesome-gold: oklch(0.88 0.18 95);
}

.dark {
  --background: oklch(0.15 0.01 286);
  --foreground: oklch(0.98 0.005 286);
  --card: oklch(0.18 0.01 286);
  --card-foreground: oklch(0.98 0.005 286);
  --popover: oklch(0.18 0.01 286);
  --popover-foreground: oklch(0.98 0.005 286);
  --primary: oklch(0.62 0.28 310);
  --primary-foreground: oklch(0.15 0.01 286);
  --secondary: oklch(0.72 0.19 345);
  --secondary-foreground: oklch(0.98 0.005 286);
  --muted: oklch(0.25 0.01 286);
  --muted-foreground: oklch(0.7 0.02 286);
  --accent: oklch(0.88 0.18 95);
  --accent-foreground: oklch(0.98 0.005 286);
  --destructive: oklch(0.5 0.22 25);
  --destructive-foreground: oklch(0.98 0.005 286);
  --border: oklch(0.3 0.01 286);
  --input: oklch(0.25 0.01 286);
  --ring: oklch(0.62 0.28 310);
  --chart-1: oklch(0.55 0.24 290);
  --chart-2: oklch(0.7 0.17 170);
  --chart-3: oklch(0.8 0.18 80);
  --chart-4: oklch(0.65 0.26 320);
  --chart-5: oklch(0.67 0.25 25);
  --sidebar: oklch(0.18 0.01 286);
  --sidebar-foreground: oklch(0.98 0.005 286);
  --sidebar-primary: oklch(0.55 0.24 290);
  --sidebar-primary-foreground: oklch(0.98 0.005 286);
  --sidebar-accent: oklch(0.25 0.01 286);
  --sidebar-accent-foreground: oklch(0.98 0.005 286);
  --sidebar-border: oklch(0.3 0.01 286);
  --sidebar-ring: oklch(0.62 0.28 310);
}