@import "tailwindcss";

/* ================================
   NOCTA CSS THEME VARIABLES
   ================================*/
:root {
	--color-background: oklch(0.987 0.004 285.89);
	--color-card: oklch(1 0 0);
	--color-card-muted: oklch(0.9554 0.003 285.89);
	--color-foreground: oklch(0.15 0.005 285.89);
	--color-border: oklch(0.8825 0.0014 285.89);
	--color-ring: oklch(0.55 0.012 285.89);
	--color-ring-offset: oklch(0.96 0.002 285.89);
	--color-overlay: oklch(0.92 0.003 285.89 / 0.65);
	--color-error: oklch(0.62 0.21 25);
	--color-warning: oklch(0.8 0.2 75);
	--color-success: oklch(0.7 0.18 155);
	--shadow-xs: 0px 1px 1px -0.5px rgba(22, 24, 29, 0.05);

	--shadow-sm:
		0px 1px 1px -0.5px rgba(22, 24, 29, 0.05), 0px 3px 3px -1.5px
		rgba(22, 24, 29, 0.05), 0px 6px 6px -3px rgba(22, 24, 29, 0.05);

	--shadow-md:
		0px 1px 1px -0.5px rgba(22, 24, 29, 0.05),
		0px 3px 3px -1.5px rgba(22, 24, 29, 0.05),
		0px 6px 6px -3px rgba(22, 24, 29, 0.05),
		0px 12px 12px -6px rgba(22, 24, 29, 0.05),
		0px 24px 24px -12px rgba(22, 24, 29, 0.05);

	--shadow-lg:
		0px 1px 1px -0.5px rgba(22, 24, 29, 0.05),
		0px 3px 3px -1.5px rgba(22, 24, 29, 0.05),
		0px 6px 6px -3px rgba(22, 24, 29, 0.05),
		0px 16px 16px -8px rgba(22, 24, 29, 0.05),
		0px 32px 32px -16px rgba(22, 24, 29, 0.05);

	--shadow-xl:
		0px 1px 1px -0.5px rgba(22, 24, 29, 0.05),
		0px 3px 3px -1.5px rgba(22, 24, 29, 0.05),
		0px 6px 6px -3px rgba(22, 24, 29, 0.05),
		0px 20px 20px -10px rgba(22, 24, 29, 0.05),
		0px 40px 40px -20px rgba(22, 24, 29, 0.05);

	--shadow-2xl:
		0px 1px 1px -0.5px rgba(22, 24, 29, 0.05),
		0px 3px 3px -1.5px rgba(22, 24, 29, 0.05),
		0px 6px 6px -3px rgba(22, 24, 29, 0.05),
		0px 24px 24px -12px rgba(22, 24, 29, 0.05),
		0px 48px 48px -24px rgba(22, 24, 29, 0.05);

	--shadow-inner:
		inset 0px 1px 2px rgba(22, 24, 29, 0.05), inset 0px -1px 2px
		rgba(0, 0, 0, 0.025);

	--radius-base: 0.175rem;
}

.dark {
	--color-background: oklch(0.18 0.0045 285.89);
	--color-card: oklch(0.2103 0.0059 285.89);
	--color-card-muted: oklch(0.2739 0.005 286.03);
	--color-foreground: oklch(0.96 0.003 285.89);
	--color-border: oklch(0.298 0.006 285.89);
	--color-ring: oklch(0.58 0.012 285.89);
	--color-ring-offset: oklch(0.15 0.005 285.89);
	--color-overlay: oklch(0.12 0.004 285.89 / 0.65);
	--color-error: oklch(0.58 0.22 25);
	--color-warning: oklch(0.75 0.18 75);
	--color-success: oklch(0.68 0.19 155);
	--shadow-xs: 0px 1px 1px -0.5px rgba(22, 24, 29, 0.05),;

	--shadow-sm:
		0px 1px 1px -0.5px rgba(22, 24, 29, 0.05), 0px 3px 3px -1.5px
		rgba(22, 24, 29, 0.05), 0px 6px 6px -3px rgba(22, 24, 29, 0.05);

	--shadow-md:
		0px 1px 1px -0.5px rgba(22, 24, 29, 0.05),
		0px 3px 3px -1.5px rgba(22, 24, 29, 0.05),
		0px 6px 6px -3px rgba(22, 24, 29, 0.05),
		0px 12px 12px -6px rgba(22, 24, 29, 0.05),
		0px 24px 24px -12px rgba(22, 24, 29, 0.05);

	--shadow-lg:
		0px 1px 1px -0.5px rgba(22, 24, 29, 0.05),
		0px 3px 3px -1.5px rgba(22, 24, 29, 0.05),
		0px 6px 6px -3px rgba(22, 24, 29, 0.05),
		0px 16px 16px -8px rgba(22, 24, 29, 0.05),
		0px 32px 32px -16px rgba(22, 24, 29, 0.05);

	--shadow-xl:
		0px 1px 1px -0.5px rgba(22, 24, 29, 0.05),
		0px 3px 3px -1.5px rgba(22, 24, 29, 0.05),
		0px 6px 6px -3px rgba(22, 24, 29, 0.05),
		0px 20px 20px -10px rgba(22, 24, 29, 0.05),
		0px 40px 40px -20px rgba(22, 24, 29, 0.05);

	--shadow-2xl:
		0px 1px 1px -0.5px rgba(22, 24, 29, 0.05),
		0px 3px 3px -1.5px rgba(22, 24, 29, 0.05),
		0px 6px 6px -3px rgba(22, 24, 29, 0.05),
		0px 24px 24px -12px rgba(22, 24, 29, 0.05),
		0px 48px 48px -24px rgba(22, 24, 29, 0.05);

	--shadow-inner:
		inset 0px 1px 2px rgba(22, 24, 29, 0.05), inset 0px -1px 2px
		rgba(0, 0, 0, 0.025);

	--radius-base: 0.175rem;
}

@theme {
	--color-background: var(--background);
	--color-card: var(--card);
	--color-card-muted: var(--card-muted);
	--color-foreground: var(--foreground);
	--color-border: var(--border);
	--color-ring: var(--ring);
	--color-ring-offset: var(--ring-offset);
	--color-overlay: var(--overlay);
	--color-error: var(--error);
	--color-warning: var(--warning);
	--color-success: var(--success);
	--shadow-2xs: var(--shadow-2xs);
	--shadow-xs: var(--shadow-xs);
	--shadow-sm: var(--shadow-sm);
	--shadow: var(--shadow);
	--shadow-md: var(--shadow-md);
	--shadow-lg: var(--shadow-lg);
	--shadow-xl: var(--shadow-xl);
	--shadow-2xl: var(--shadow-2xl);
	--shadow-inner: var(--shadow-inner);
	--radius-xs: calc(var(--radius-base) * 1);
	--radius-sm: calc(var(--radius-base) * 2);
	--radius-md: calc(var(--radius-base) * 3);
	--radius-lg: calc(var(--radius-base) * 4);
	--radius-xl: calc(var(--radius-base) * 6);
	--radius-2xl: calc(var(--radius-base) * 8);
	--radius-3xl: calc(var(--radius-base) * 12);
	--radius-4xl: calc(var(--radius-base) * 16);
	--radius-full: 9999px;
}
