/* Common base CSS - shared between standalone and integration versions */
/* This file contains CSS variables, theme, and keyframes used by both versions */

:root {
	--background: 0 0% 100%;
	--foreground: 240 10% 3.9%;
	--card: 0 0% 100%;
	--card-foreground: 240 10% 3.9%;
	--popover: 0 0% 100%;
	--popover-foreground: 240 10% 3.9%;
	--primary: 240 5.9% 10%;
	--primary-foreground: 0 0% 98%;
	--secondary: 240 4.8% 95.9%;
	--secondary-foreground: 240 5.9% 10%;
	--muted: 240 4.8% 95.9%;
	--muted-foreground: 240 3.8% 46.1%;
	--accent: 240 4.8% 95.9%;
	--accent-foreground: 240 5.9% 10%;
	--destructive: 347 77% 50%;
	--destructive-foreground: 0 0% 98%;
	--border: 240 5.9% 90%;
	--input: 240 5.9% 90%;
	--ring: 240 10% 3.9%;
	--chart-1: 12 76% 61%;
	--chart-2: 173 58% 39%;
	--chart-3: 197 37% 24%;
	--chart-4: 43 74% 66%;
	--chart-5: 27 87% 67%;
	--radius: 0.5rem;
	--sidebar-background: 0 0% 98%;
	--sidebar-foreground: 240 5.3% 26.1%;
	--sidebar-primary: 240 5.9% 10%;
	--sidebar-primary-foreground: 0 0% 98%;
	--sidebar-accent: 240 4.8% 95.9%;
	--sidebar-accent-foreground: 240 5.9% 10%;
	--sidebar-border: 220 13% 91%;
	--sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
	--background: 240 10% 3.9%;
	--foreground: 0 0% 98%;
	--card: 240 10% 3.9%;
	--card-foreground: 0 0% 98%;
	--popover: 240 10% 3.9%;
	--popover-foreground: 0 0% 98%;
	--primary: 0 0% 98%;
	--primary-foreground: 240 5.9% 10%;
	--secondary: 240 3.7% 15.9%;
	--secondary-foreground: 0 0% 98%;
	--muted: 240 3.7% 15.9%;
	--muted-foreground: 240 5% 64.9%;
	--accent: 240 3.7% 15.9%;
	--accent-foreground: 0 0% 98%;
	--destructive: 345 83% 41%;
	--destructive-foreground: 0 0% 98%;
	--border: 240 3.7% 15.9%;
	--input: 240 3.7% 15.9%;
	--ring: 240 4.9% 83.9%;
	--chart-1: 220 70% 50%;
	--chart-2: 160 60% 45%;
	--chart-3: 30 80% 55%;
	--chart-4: 280 65% 60%;
	--chart-5: 340 75% 55%;
	--sidebar-background: 240 5.9% 10%;
	--sidebar-foreground: 240 4.8% 95.9%;
	--sidebar-primary: 224.3 76.3% 48%;
	--sidebar-primary-foreground: 0 0% 100%;
	--sidebar-accent: 240 3.7% 15.9%;
	--sidebar-accent-foreground: 240 4.8% 95.9%;
	--sidebar-border: 240 3.7% 15.9%;
	--sidebar-ring: 217.2 91.2% 59.8%;
}

@theme inline {
	/* Cyan (Custom) */
	--color-cyan-50: oklch(0.9812 0.027 196.72);
	--color-cyan-100: oklch(0.965 0.0516 196.33);
	--color-cyan-200: oklch(0.938 0.0956 195.64);
	--color-cyan-300: oklch(0.9193 0.1285 195.15);
	--color-cyan-400: oklch(0.9089 0.1478 194.87);
	--color-cyan-500: oklch(0.9054 0.15455 194.769);
	--color-cyan-600: oklch(0.7653 0.1306 194.77);
	--color-cyan-700: oklch(0.6183 0.10555 194.769);
	--color-cyan-800: oklch(0.462 0.078864 194.769);
	--color-cyan-900: oklch(0.2907 0.0496 194.77);
	--color-cyan-950: oklch(0.1932 0.033 194.77);

	/* Gray (Zinc) */
	--color-gray-50: oklch(0.985 0 0);
	--color-gray-100: oklch(0.967 0.001 286.375);
	--color-gray-200: oklch(0.92 0.004 286.32);
	--color-gray-300: oklch(0.871 0.006 286.286);
	--color-gray-400: oklch(0.705 0.015 286.067);
	--color-gray-500: oklch(0.552 0.016 285.938);
	--color-gray-600: oklch(0.442 0.017 285.786);
	--color-gray-700: oklch(0.37 0.013 285.805);
	--color-gray-800: oklch(0.274 0.006 286.033);
	--color-gray-900: oklch(0.21 0.006 285.885);
	--color-gray-950: oklch(0.141 0.005 285.823);

	/* Red (Rose) */
	--color-red-50: oklch(0.969 0.015 12.422);
	--color-red-100: oklch(0.941 0.03 12.58);
	--color-red-200: oklch(0.892 0.058 10.001);
	--color-red-300: oklch(0.81 0.117 11.638);
	--color-red-400: oklch(0.712 0.194 13.428);
	--color-red-500: oklch(0.645 0.246 16.439);
	--color-red-600: oklch(0.586 0.253 17.585);
	--color-red-700: oklch(0.514 0.222 16.935);
	--color-red-800: oklch(0.455 0.188 13.697);
	--color-red-900: oklch(0.41 0.159 10.272);
	--color-red-950: oklch(0.271 0.105 12.094);

	/* Green (Emerald) */
	--color-green-50: oklch(0.979 0.021 166.113);
	--color-green-100: oklch(0.95 0.052 163.051);
	--color-green-200: oklch(0.905 0.093 164.15);
	--color-green-300: oklch(0.845 0.143 164.978);
	--color-green-400: oklch(0.765 0.177 163.223);
	--color-green-500: oklch(0.696 0.17 162.48);
	--color-green-600: oklch(0.596 0.145 163.225);
	--color-green-700: oklch(0.508 0.118 165.612);
	--color-green-800: oklch(0.432 0.095 166.913);
	--color-green-900: oklch(0.378 0.077 168.94);
	--color-green-950: oklch(0.262 0.051 172.552);

	/* Blue (Sky) */
	--color-blue-50: oklch(0.977 0.013 236.62);
	--color-blue-100: oklch(0.951 0.026 236.824);
	--color-blue-200: oklch(0.901 0.058 230.902);
	--color-blue-300: oklch(0.828 0.111 230.318);
	--color-blue-400: oklch(0.746 0.16 232.661);
	--color-blue-500: oklch(0.685 0.169 237.323);
	--color-blue-600: oklch(0.588 0.158 241.966);
	--color-blue-700: oklch(0.5 0.134 242.749);
	--color-blue-800: oklch(0.443 0.11 240.79);
	--color-blue-900: oklch(0.391 0.09 240.876);
	--color-blue-950: oklch(0.293 0.066 243.157);

	/* Theme Colors */
	--color-accent-foreground: hsl(var(--accent-foreground));
	--color-accent: hsl(var(--accent));
	--color-background: hsl(var(--background));
	--color-border: hsl(var(--border));
	--color-card-foreground: hsl(var(--card-foreground));
	--color-card: hsl(var(--card));
	--color-chart-1: hsl(var(--chart-1));
	--color-chart-2: hsl(var(--chart-2));
	--color-chart-3: hsl(var(--chart-3));
	--color-chart-4: hsl(var(--chart-4));
	--color-chart-5: hsl(var(--chart-5));
	--color-destructive-foreground: hsl(var(--destructive-foreground));
	--color-destructive: hsl(var(--destructive));
	--color-foreground: hsl(var(--foreground));
	--color-input: hsl(var(--input));
	--color-muted-foreground: hsl(var(--muted-foreground));
	--color-muted: hsl(var(--muted));
	--color-popover-foreground: hsl(var(--popover-foreground));
	--color-popover: hsl(var(--popover));
	--color-primary-foreground: hsl(var(--primary-foreground));
	--color-primary: hsl(var(--primary));
	--color-ring: hsl(var(--ring));
	--color-secondary-foreground: hsl(var(--secondary-foreground));
	--color-secondary: hsl(var(--secondary));
	--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
	--color-sidebar-accent: hsl(var(--sidebar-accent));
	--color-sidebar-border: hsl(var(--sidebar-border));
	--color-sidebar-foreground: hsl(var(--sidebar-foreground));
	--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
	--color-sidebar-primary: hsl(var(--sidebar-primary));
	--color-sidebar-ring: hsl(var(--sidebar-ring));
	--color-sidebar: hsl(var(--sidebar-background));

	/* Screens */
	--breakpoint-3xl: 1920px;
	--breakpoint-4xl: 2560px;

	/* Fonts */
	--font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
	--font-mono: 'Geist Mono', ui-monospace, monospace;

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

	/* Animations */
	--animate-accordion-down: accordion-down 0.2s ease-out;
	--animate-accordion-up: accordion-up 0.2s ease-out;
	--animate-ellipsis: ellipsis 1.5s steps(4, end) infinite;
}

@keyframes accordion-down {
	from {
		height: 0;
	}
	to {
		height: var(--radix-accordion-content-height);
	}
}

@keyframes accordion-up {
	from {
		height: var(--radix-accordion-content-height);
	}
	to {
		height: 0;
	}
}

@keyframes ellipsis {
	0% {
		content: '.';
	}
	25% {
		content: '..';
	}
	50% {
		content: '...';
	}
	75% {
		content: '';
	}
}

body {
	scrollbar-width: thin;
	scrollbar-color: var(--color-gray-200) transparent;
}

.dark body {
	scrollbar-color: var(--color-gray-800) transparent;
}

button:not([disabled]):not([aria-disabled='true']),
[role='button']:not([disabled]):not([aria-disabled='true']) {
	cursor: pointer;
}

[data-loading]::after {
	content: '.';
	display: inline-block;
	width: 1em;
	text-align: left;
	animation: ellipsis 1.5s steps(4, end) infinite;
}
