@import 'tailwindcss';
@import 'tw-animate-css';
/* @import '@code-hike/mdx/dist/index.css' layer(base); */
@import './primary-newsletter-cta.css';
@import './tip-newsletter-cta.css';
@import './video-block-newsletter-cta.css';
/* @import './commerce.css'; */
@import './login.css' layer(utilities);

@plugin '@tailwindcss/typography';

@source '../**/*.{ts,tsx,mdx}';
@source '../../node_modules/@coursebuilder/ui/chat-assistant/**/*.{ts,tsx,mdx}';
@source '../../node_modules/@coursebuilder/ui/codemirror/**/*.{ts,tsx,mdx}';
@source '../../node_modules/@coursebuilder/ui/hooks/**/*.{ts,tsx,mdx}';
@source '../../node_modules/@coursebuilder/ui/primitives/**/*.{ts,tsx,mdx}';
@source '../../node_modules/@coursebuilder/ui/feedback-widget/*.{ts,tsx,mdx}';
@source '../../node_modules/@coursebuilder/ui/resources-crud/**/*.{ts,tsx,mdx}';
@source '../../node_modules/@coursebuilder/ui/utils/**/*.{ts,tsx,mdx}';
@source '../../node_modules/@coursebuilder/ui/index.tsx';
@source '../../node_modules/@coursebuilder/commerce-next/src/**/*.{ts,tsx}';

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

@theme {
	/* Screens */
	--breakpoint-2xl: 1820px;

	/* Container */
	--container-center: true;
	--container-padding: 1.5rem;
	--container-screens-2xl: 1280px;

	/* Gray color scale */
	--color-gray-50: oklch(98.5% 0 0);
	--color-gray-100: oklch(97% 0 0);
	--color-gray-200: oklch(92.2% 0 0);
	--color-gray-300: oklch(87% 0 0);
	--color-gray-400: oklch(70.5% 0.015 286.067);
	--color-gray-500: oklch(55.2% 0.016 285.938);
	--color-gray-600: oklch(43.9% 0 0);
	--color-gray-700: oklch(37.1% 0 0);
	--color-gray-800: oklch(26.9% 0 0);
	--color-gray-900: oklch(20.5% 0 0);
	--color-gray-950: oklch(14.5% 0 0);

	--animate-shine: shine 5s linear infinite;
	@keyframes shine {
		0% {
			background-position: 100%;
		}
		50% {
			background-position: -100%;
		}
	}
}

:root {
	--nav-height: 63px;
	--command-bar-height: 37px;
	--pane-layout-height: calc(
		100vh - var(--nav-height) - var(--command-bar-height)
	);
	--code-editor-layout-height: calc(
		100vh - var(--nav-height) - var(--command-bar-height) - 30px
	);

	--background: oklch(0.9848 0 0);
	--foreground: oklch(0.2156 0 0);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.2156 0 0);
	--popover: oklch(0.9925 0.0004 71.45);
	--popover-foreground: oklch(0.2477 0.053 66.43);
	--primary: oklch(0 0 0);
	--primary-foreground: oklch(1 0 0);
	--secondary: oklch(0.9312 0 0);
	--secondary-foreground: oklch(0 0 0);
	--muted: oklch(0.9696 0 0);
	--muted-foreground: oklch(0.4184 0 0);
	--accent: oklch(0.9389 0 0);
	--accent-foreground: oklch(0.1579 0 0);
	--destructive: oklch(0.5918 0.177 29.23);
	--destructive-foreground: oklch(0.9915 0.004 81.45);
	--border: oklch(0.9312 0 0);
	--input: oklch(0.9234 0 0);
	--ring: oklch(0.8452 0 0);
	--radius: 0.3rem;
	color-scheme: light;

	--md-editor-background: var(--background);
	--md-editor-foreground: var(--foreground);
	--md-editor-border: var(--border);

	/* codehike theme */
	--ch-0: light;
	--ch-1: #6e7781;
	--ch-2: #0550ae;
	--ch-3: #953800;
	--ch-4: #24292f;
	--ch-5: #8250df;
	--ch-6: #116329;
	--ch-7: #cf222e;
	--ch-8: #0a3069;
	--ch-9: #82071e;
	--ch-10: #f6f8fa;
	--ch-11: #ffebe9;
	--ch-12: #dafbe1;
	--ch-13: #ffd8b5;
	--ch-14: #eaeef2;
	--ch-15: #57606a;
	--ch-16: #ffffff;
	--ch-17: #eaeef280;
	--ch-18: #fdff0033;
	--ch-19: #1a85ff;
	--ch-20: #add6ff;
	--ch-21: #0969da;
	--ch-22: #f6f8fa;
	--ch-23: #d0d7de;
	--ch-24: #8c959f;
	--ch-25: #afb8c133;
	--ch-26: #ffffffe6;
}

.dark {
	/* golden color scheme */
	--background: oklch(0.1157 0 0);
	--foreground: oklch(0.9001 0 0);
	--card: oklch(0.1579 0 0);
	--card-foreground: oklch(0.9242 0.0022 71.43);
	--popover: oklch(0.1645 0.008 81.45);
	--popover-foreground: oklch(0.9185 0.004 81.45);
	--primary: oklch(0.8501 0.1277 79.28);
	--primary-foreground: oklch(0 0 0);
	--secondary: oklch(0.2267 0 0);
	--secondary-foreground: oklch(1 0 0);

	--muted: oklch(0.2156 0 0);
	--muted-foreground: oklch(0.7652 0 0);

	--accent: oklch(0.2156 0 0);
	--accent-foreground: oklch(0.9242 0.0022 71.43);

	--destructive: oklch(0.4218 0.177 29.23);
	--destructive-foreground: oklch(0.9185 0.004 81.45);

	--border: oklch(0.2156 0 0);
	--input: oklch(0.2697 0 0);
	--ring: oklch(0.8501 0.1277 79.28);
	--radius: 0.3rem;
	color-scheme: dark;

	/* codehike theme */
	--ch-0: dark;
	--ch-1: #8b949e;
	--ch-2: #79c0ff;
	--ch-3: #ffa657;
	--ch-4: #c9d1d9;
	--ch-5: #d2a8ff;
	--ch-6: #7ee787;
	--ch-7: #ff7b72;
	--ch-8: #a5d6ff;
	--ch-9: #ffa198;
	--ch-10: #f0f6fc;
	--ch-11: #490202;
	--ch-12: #04260f;
	--ch-13: #5a1e02;
	--ch-14: #161b22;
	--ch-15: #8b949e;
	--ch-16: #0d1117;
	--ch-17: #6e76811a;
	--ch-18: #ffffff0b;
	--ch-19: #3794ff;
	--ch-20: #264f78;
	--ch-21: #1f6feb;
	--ch-22: #010409;
	--ch-23: #30363d;
	--ch-24: #6e7681;
	--ch-25: #6e768166;
	--ch-26: #0d1117e6;
}

@theme inline {
	/* Font families */
	--font-sans:
		var(--font-inter), ui-sans-serif, system-ui, sans-serif,
		'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	--font-heading:
		var(--font-inter), ui-sans-serif, system-ui, sans-serif,
		'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	--font-mono:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
		'Courier New', monospace;

	/* Shadcn color tokens */
	--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);

	/* Border radius */
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);
}

@utility prose-base {
	--tw-prose-body: var(--color-foreground);
	--tw-prose-headings: var(--color-foreground);
	--tw-prose-lead: var(--color-foreground);
	--tw-prose-links: var(--color-primary);
	--tw-prose-bold: var(--color-foreground);
	--tw-prose-counters: var(--color-foreground);
	--tw-prose-bullets: var(--color-foreground);
	--tw-prose-hr: var(--color-border);
	--tw-prose-quotes: var(--color-foreground);
	--tw-prose-quote-borders: var(--color-border);
	--tw-prose-captions: var(--color-foreground);
	--tw-prose-code: var(--color-foreground);
	--tw-prose-pre-code: var(--color-foreground);
	--tw-prose-pre-bg: var(--color-muted);
	--tw-prose-th-borders: var(--color-border);
	--tw-prose-td-borders: var(--color-border);
	--tw-prose-invert-body: var(--color-foreground);
	--tw-prose-invert-headings: var(--color-foreground);
	--tw-prose-invert-lead: var(--color-foreground);
	--tw-prose-invert-links: var(--color-primary);
	--tw-prose-invert-bold: var(--color-foreground);
	--tw-prose-invert-counters: var(--color-foreground);
	--tw-prose-invert-bullets: var(--color-muted-foreground);
	--tw-prose-invert-hr: var(--color-border);
	--tw-prose-invert-quotes: var(--color-muted-foreground);
	--tw-prose-invert-quote-borders: var(--color-border);
	--tw-prose-invert-captions: var(--color-foreground);
	--tw-prose-invert-code: var(--color-foreground);
	--tw-prose-invert-pre-code: var(--color-foreground);
	--tw-prose-invert-pre-bg: var(--color-muted);
	--tw-prose-invert-th-borders: var(--color-foreground);
	--tw-prose-invert-td-borders: var(--color-border);
}

@layer base {
	* {
		@apply border-border outline-ring/50 selection:bg-primary selection:text-primary-foreground;
	}
	body {
		@apply bg-background text-foreground font-sans font-normal;
	}

	html {
		scrollbar-gutter: stable;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--font-heading);
		text-wrap: balance;
		font-weight: 700;
	}

	.cm-gutterElement {
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-mono);
		font-size: 0.75rem;
		line-height: 1rem;
	}

	.cm-gutters {
		border-right-width: 1px;
		border-color: var(--color-border);
	}

	html.dark .shiki,
	html.dark .shiki span {
		color: var(--shiki-dark) !important;
		background-color: var(--background) !important;
		font-style: var(--shiki-dark-font-style) !important;
		font-weight: var(--shiki-dark-font-weight) !important;
		text-decoration: var(--shiki-dark-text-decoration) !important;
	}

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

/* Custom component styles */
.md-editor-toolbar-warp {
	background-color: var(--color-background);
	border-bottom-width: 1px;
	border-color: var(--color-border);
}

[data-checklist] {
	padding-left: 1rem;
	list-style-position: outside;
	list-style-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDE0IDE0Ij4KICA8cGF0aCBmaWxsPSIjRjNBRDVCIiBkPSJtMTQgMy4xNS0uNy0xLjRjLTYuMDM4IDEuNzUtOS4xIDUuNi05LjEgNS42bC0yLjgtMi4xTDAgNi42NWw0LjIgNS2YzMuMjM3LTYuMDM3IDkuOC05LjEgOS44LTkuMVoiLz4KPC9zdmc+Cg==');
}

[data-builders-heading] {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

[data-builders-heading] img {
	position: absolute;
	rotate: 8deg;
	@apply right-[-10px] top-[-90px] max-w-[100px] lg:right-[-100px] lg:top-[-100px] lg:max-w-full;
}

[data-every-hero-needs-a-guide] {
	position: relative;
	width: 20rem;
	translate: 0 1.25rem;
}

@media (min-width: 640px) {
	[data-every-hero-needs-a-guide] {
		width: auto;
	}
}

[data-discord-button] {
	background-color: #5a65ea;
}
