global.css

@import "tailwindcss";

/* DaisyUI v5 with custom PodCodar themes - default themes disabled */
@plugin "daisyui" {
	themes: false;
}

/* Tailwind Typography plugin for gorgeous markdown rendering */
@plugin "@tailwindcss/typography";

/* Scan Astro pages, components, and content for class names */
@source "../**/*.{astro,html,js,ts,mjs,md,mdx}";

/*
  PodCodar uses the same stack as github.com/podcodar/webapp: Tailwind CSS v4 + daisyUI.
  Custom PodCodar themes based on the mascot llama colors: purple/violet primary,
  lavender secondary, with white/cream base. Colors use OKLCH format.
*/

/* PodCodar Light Theme (Default) - Based on mascot colors: purple/violet primary */
@plugin "daisyui/theme" {
	name: "podcodar-light";
	default: true;
	prefersdark: false;
	color-scheme: light;

	/* Background layers - Clean white with subtle purple tint */
	--color-base-100: oklch(99% 0.002 300);
	--color-base-200: oklch(96% 0.005 300);
	--color-base-300: oklch(90% 0.01 300);
	--color-base-content: oklch(25% 0.02 300);

	/* Primary - Purple/Violet (from mascot outline) */
	--color-primary: oklch(60% 0.2 285);
	--color-primary-content: oklch(99% 0.005 300);

	/* Secondary - Lavender/Lilac (lighter purple accent) */
	--color-secondary: oklch(75% 0.12 290);
	--color-secondary-content: oklch(30% 0.03 290);

	/* Accent - Deep Purple (sunglasses lenses) */
	--color-accent: oklch(50% 0.18 285);
	--color-accent-content: oklch(99% 0.005 300);

	/* Neutral - Warm Gray */
	--color-neutral: oklch(45% 0.02 300);
	--color-neutral-content: oklch(99% 0.005 300);

	/* Semantic colors */
	--color-info: oklch(70% 0.15 250);
	--color-info-content: oklch(25% 0.03 250);

	--color-success: oklch(65% 0.15 145);
	--color-success-content: oklch(99% 0.005 145);

	--color-warning: oklch(75% 0.15 85);
	--color-warning-content: oklch(30% 0.03 85);

	--color-error: oklch(60% 0.18 25);
	--color-error-content: oklch(99% 0.005 25);

	/* Radius tokens */
	--radius-selector: 0.5rem;
	--radius-field: 0.375rem;
	--radius-box: 0.75rem;

	/* Size tokens */
	--size-selector: 0.25rem;
	--size-field: 0.25rem;

	/* Border */
	--border: 1px;

	/* Effects */
	--depth: 1;
	--noise: 0;
}

/* PodCodar Dark Theme - Deep purple-tinted dark theme */
@plugin "daisyui/theme" {
	name: "podcodar-dark";
	default: false;
	prefersdark: true;
	color-scheme: dark;

	/* Background layers - Deep dark with purple tint */
	--color-base-100: oklch(20% 0.02 300);
	--color-base-200: oklch(25% 0.025 300);
	--color-base-300: oklch(32% 0.03 300);
	--color-base-content: oklch(96% 0.015 300);

	/* Primary - Bright Purple/Violet (glowing mascot style) */
	--color-primary: oklch(70% 0.18 285);
	--color-primary-content: oklch(20% 0.03 300);

	/* Secondary - Soft Lavender (for dark mode harmony) */
	--color-secondary: oklch(80% 0.1 290);
	--color-secondary-content: oklch(25% 0.03 290);

	/* Accent - Vibrant Purple */
	--color-accent: oklch(65% 0.22 285);
	--color-accent-content: oklch(99% 0.005 300);

	/* Neutral - Purple-Gray */
	--color-neutral: oklch(70% 0.03 300);
	--color-neutral-content: oklch(20% 0.02 300);

	/* Semantic colors */
	--color-info: oklch(70% 0.12 250);
	--color-info-content: oklch(20% 0.03 250);

	--color-success: oklch(70% 0.12 145);
	--color-success-content: oklch(20% 0.03 145);

	--color-warning: oklch(75% 0.12 85);
	--color-warning-content: oklch(25% 0.03 85);

	--color-error: oklch(65% 0.15 25);
	--color-error-content: oklch(99% 0.005 25);

	/* Radius tokens */
	--radius-selector: 0.5rem;
	--radius-field: 0.375rem;
	--radius-box: 0.75rem;

	/* Size tokens */
	--size-selector: 0.25rem;
	--size-field: 0.25rem;

	/* Border */
	--border: 1px;

	/* Effects */
	--depth: 1;
	--noise: 0;
}

@layer base {
	html {
		color-scheme: light dark;
	}

	body {
		@apply bg-base-100 font-sans text-base-content antialiased;
		font-family: var(--font-atkinson), ui-sans-serif, system-ui, sans-serif;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		@apply mb-2 font-bold leading-tight text-base-content;
	}

	h1 {
		@apply text-5xl;
	}
	h2 {
		@apply text-4xl;
	}
	h3 {
		@apply text-3xl;
	}
	h4 {
		@apply text-2xl;
	}
	h5 {
		@apply text-xl;
	}

	a {
		@apply text-primary underline-offset-2 hover:underline;
	}

	p {
		@apply mb-4 leading-relaxed;
	}

	code {
		@apply rounded bg-base-200 px-1.5 py-0.5 text-sm;
	}

	pre {
		@apply rounded-box p-6;
	}

	pre > code {
		@apply bg-transparent p-0;
	}

	blockquote {
		@apply border-l-4 border-primary pl-5 text-xl not-italic;
	}

	hr {
		@apply my-6 border-0 border-t border-base-300;
	}

	img {
		@apply h-auto max-w-full rounded-lg;
	}

	table {
		@apply w-full;
	}

	textarea,
	input {
		@apply text-base;
	}
}

/* ── Prose / Markdown gorgeous styling ─────────────────────────────────── */

/* Heading anchors from rehype-autolink-headings */
.heading-anchor {
	@apply no-underline;
}

.heading-anchor::after {
	content: '#';
	@apply ml-2 text-primary/30 opacity-0 transition-opacity duration-200;
}

.heading-anchor:hover::after {
	@apply opacity-100;
}

/* Prose overrides for PodCodar theme */
.prose {
	/* Use theme colors for prose elements */
	--tw-prose-body: var(--color-base-content);
	--tw-prose-headings: var(--color-base-content);
	--tw-prose-lead: var(--color-base-content);
	--tw-prose-links: var(--color-primary);
	--tw-prose-bold: var(--color-base-content);
	--tw-prose-counters: var(--color-primary);
	--tw-prose-bullets: var(--color-primary);
	--tw-prose-hr: var(--color-base-300);
	--tw-prose-quotes: var(--color-base-content);
	--tw-prose-quote-borders: var(--color-primary);
	--tw-prose-captions: var(--color-base-content);
	--tw-prose-kbd: var(--color-base-content);
	--tw-prose-kbd-shadows: var(--color-base-300);
	--tw-prose-code: var(--color-primary);
	--tw-prose-pre-code: var(--color-base-content);
	--tw-prose-pre-bg: var(--color-base-200);
	--tw-prose-th-borders: var(--color-base-300);
	--tw-prose-td-borders: var(--color-base-300);

	/* Invert (dark mode) */
	--tw-prose-invert-body: var(--color-base-content);
	--tw-prose-invert-headings: var(--color-base-content);
	--tw-prose-invert-lead: var(--color-base-content);
	--tw-prose-invert-links: var(--color-primary);
	--tw-prose-invert-bold: var(--color-base-content);
	--tw-prose-invert-counters: var(--color-primary);
	--tw-prose-invert-bullets: var(--color-primary);
	--tw-prose-invert-hr: var(--color-base-300);
	--tw-prose-invert-quotes: var(--color-base-content);
	--tw-prose-invert-quote-borders: var(--color-primary);
	--tw-prose-invert-captions: var(--color-base-content);
	--tw-prose-invert-kbd: var(--color-base-content);
	--tw-prose-invert-kbd-shadows: var(--color-base-300);
	--tw-prose-invert-code: var(--color-primary);
	--tw-prose-invert-pre-code: var(--color-base-content);
	--tw-prose-invert-pre-bg: var(--color-base-200);
	--tw-prose-invert-th-borders: var(--color-base-300);
	--tw-prose-invert-td-borders: var(--color-base-300);
}

/* Gorgeous table styling within prose */
.prose table {
	@apply overflow-hidden rounded-xl border border-base-300 text-sm;
}

.prose thead {
	@apply bg-base-200;
}

.prose th {
	@apply px-4 py-3 text-left font-semibold text-base-content;
}

.prose td {
	@apply px-4 py-3 border-t border-base-300;
}

.prose tbody tr:nth-child(even) {
	@apply bg-base-200/30;
}

.prose tbody tr:hover {
	@apply bg-primary/5 transition-colors duration-200;
}

/* Gorgeous blockquote */
.prose blockquote {
	@apply relative border-none bg-gradient-to-r from-primary/5 to-transparent rounded-r-xl pr-6 py-4 pl-6 not-italic;
}

.prose blockquote::before {
	content: '';
	@apply absolute left-0 top-0 bottom-0 w-1 rounded-full bg-gradient-to-b from-primary to-secondary;
}

.prose blockquote p {
	@apply m-0 text-lg leading-relaxed;
}

/* Gorgeous horizontal rule */
.prose hr {
	@apply border-none my-10;
	background: linear-gradient(90deg, transparent, var(--color-base-300), transparent);
	height: 1px;
}

/* Code blocks */
.prose pre {
	@apply rounded-xl border border-base-300/50 shadow-sm;
}

.prose code {
	@apply text-sm font-medium;
}

.prose :not(pre) > code {
	@apply bg-primary/10 text-primary px-1.5 py-0.5 rounded-md;
}

/* Lists */
.prose ul > li::marker {
	@apply text-primary;
}

.prose ol > li::marker {
	@apply text-primary font-semibold;
}

/* Nested lists */
.prose ul ul > li::marker,
.prose ol ul > li::marker {
	@apply text-secondary;
}

/* Definition lists if used */
.prose dl dt {
	@apply font-semibold text-base-content mt-4;
}

.prose dl dd {
	@apply ml-4 text-base-content/80;
}

/* Reduced text size on mobile to keep content readable without aggressive scaling */
@media (max-width: 640px) {
	body {
		@apply text-base;
	}

	h1 {
		@apply text-4xl;
	}
	h2 {
		@apply text-3xl;
	}
	h3 {
		@apply text-2xl;
	}
}