@import "normalize.css";
@import "@radix-ui/themes/styles.css";

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--font-manrope);
	font-variant-numeric: lining-nums proportional-nums;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-variation-settings: "opsz" 10;
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--border-default) transparent;
}

*::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

*::-webkit-scrollbar-thumb {
	background: var(--border-default);
	border-radius: 999px;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

body {
	background-color: var(--bg-canvas);
	color: var(--text-primary);
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: var(--page-glow);
	pointer-events: none;
	z-index: -1;
}

body[data-project-wizard-layout="true"] {
	overflow: hidden;
}

body[data-project-wizard-layout="true"] #app-root {
	height: 100vh;
	overflow: hidden;
}

::selection {
	background-color: var(--selection-bg);
	color: var(--selection-text);
}

a {
	transition: color var(--duration-normal) var(--ease-out);
}

button {
	font-family: inherit;
}

:root {
	/* Catppuccin Latte */
	--purple-50: #f7efff;
	--purple-100: #eedfff;
	--purple-200: #dfc8ff;
	--purple-300: #c8abff;
	--purple-400: #a777f2;
	--purple-500: #8839ef;
	--purple-600: #7430ca;
	--purple-700: #5f27a5;
	--purple-800: #4a1f80;
	--purple-900: #35175c;

	--green-50: #eff8ea;
	--green-100: #dcefd2;
	--green-200: #c7e5b9;
	--green-300: #afd89d;
	--green-400: #7fc16c;
	--green-500: #40a02b;
	--green-600: #348222;
	--green-700: #28651a;
	--green-800: #1d4912;
	--green-900: #122d0a;

	--color-success: #40a02b;
	--color-danger: #d20f39;
	--color-warning: #df8e1d;

	--color-primary: var(--purple-500);
	--color-secondary: var(--purple-400);
	--color-white: #ffffff;
	--color-black: #000000;
	--text-primary: #4c4f69;
	--text-secondary: #5c5f77;
	--text-tertiary: #8c8fa1;

	--bg-canvas: #e6e9ef;
	--bg-default: #eff1f5;
	--bg-surface: #dce0e8;
	--bg-hover: #ccd0da;
	--bg-default-invert: #1e1e2e;

	--border-default: #bcc0cc;
	--border-subtle: #dce0e8;

	--waveform-wave: #7287fd;
	--waveform-progress: #8839ef;
	--accent-solid-start: #a777f2;
	--accent-solid-end: #7430ca;
	--accent-foreground: #ffffff;
	--accent-shadow: rgba(136, 57, 239, 0.28);
	--accent-shadow-hover: rgba(136, 57, 239, 0.38);

	--page-glow: radial-gradient(circle at 50% 0%, rgba(136, 57, 239, 0.08) 0%, transparent 62%);
	--selection-bg: rgba(136, 57, 239, 0.18);
	--selection-text: #4c4f69;

	--shadow-sm: 0 1px 2px rgba(76, 79, 105, 0.06), 0 2px 8px rgba(76, 79, 105, 0.04);
	--shadow-md: 0 4px 6px -1px rgba(76, 79, 105, 0.08), 0 24px 48px -12px rgba(76, 79, 105, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(76, 79, 105, 0.08), 0 40px 80px -20px rgba(76, 79, 105, 0.12);

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;

	--header-height: 56px;

	/* Motion tokens */
	--duration-fast: 150ms;
	--duration-normal: 250ms;
	--duration-slow: 350ms;
	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	--alert-info-bg: rgba(4, 165, 229, 0.12);
	--alert-info-text: #1e66f5;
	--alert-info-border: rgba(4, 165, 229, 0.28);
	--alert-success-bg: rgba(64, 160, 43, 0.12);
	--alert-success-text: #28651a;
	--alert-success-border: rgba(64, 160, 43, 0.26);
	--alert-warning-bg: rgba(223, 142, 29, 0.14);
	--alert-warning-text: #b06a12;
	--alert-warning-border: rgba(223, 142, 29, 0.28);
	--alert-danger-bg: rgba(210, 15, 57, 0.12);
	--alert-danger-text: #b10f34;
	--alert-danger-border: rgba(210, 15, 57, 0.24);

	--focus-ring: 0 0 0 2px var(--bg-default), 0 0 0 4px rgba(136, 57, 239, 0.24);
}

[data-theme="dark"] {
	/* Catppuccin Mocha */
	--purple-50: #2b253b;
	--purple-100: #362f4c;
	--purple-200: #4b4168;
	--purple-300: #6a5a93;
	--purple-400: #cba6f7;
	--purple-500: #d9bcfa;
	--purple-600: #e4cffc;
	--purple-700: #eddfff;
	--purple-800: #f3ebff;
	--purple-900: #faf6ff;

	--green-50: #1d2b1d;
	--green-100: #243524;
	--green-200: #314a31;
	--green-300: #426542;
	--green-400: #679d64;
	--green-500: #8ccf86;
	--green-600: #a6e3a1;
	--green-700: #b9ebae;
	--green-800: #cdf2c8;
	--green-900: #e0f8e1;

	--color-success: #a6e3a1;
	--color-danger: #f38ba8;
	--color-warning: #f9e2af;

	--color-primary: var(--purple-400);
	--color-secondary: var(--purple-300);

	--text-primary: #cdd6f4;
	--text-secondary: #bac2de;
	--text-tertiary: #9399b2;

	--bg-canvas: #11111b;
	--bg-default: #1e1e2e;
	--bg-surface: #313244;
	--bg-hover: #45475a;
	--bg-default-invert: #eff1f5;

	--border-default: #45475a;
	--border-subtle: #313244;

	--waveform-wave: #6c7086;
	--waveform-progress: #cba6f7;
	--accent-solid-start: #6a5a93;
	--accent-solid-end: #362f4c;
	--accent-foreground: #f5e0dc;
	--accent-shadow: rgba(203, 166, 247, 0.22);
	--accent-shadow-hover: rgba(203, 166, 247, 0.3);

	--page-glow: radial-gradient(circle at 50% 0%, rgba(203, 166, 247, 0.12) 0%, transparent 55%);
	--selection-bg: rgba(203, 166, 247, 0.2);
	--selection-text: #f5e0dc;

	--shadow-sm: 0 1px 2px rgba(17, 17, 27, 0.5);
	--shadow-md: 0 4px 6px -1px rgba(17, 17, 27, 0.58), 0 24px 48px -12px rgba(17, 17, 27, 0.52);
	--shadow-lg: 0 10px 15px -3px rgba(17, 17, 27, 0.6), 0 40px 80px -20px rgba(17, 17, 27, 0.7);

	--alert-info-bg: rgba(137, 220, 235, 0.14);
	--alert-info-text: #89dceb;
	--alert-info-border: rgba(137, 220, 235, 0.28);
	--alert-success-bg: rgba(166, 227, 161, 0.14);
	--alert-success-text: #a6e3a1;
	--alert-success-border: rgba(166, 227, 161, 0.3);
	--alert-warning-bg: rgba(249, 226, 175, 0.14);
	--alert-warning-text: #f9e2af;
	--alert-warning-border: rgba(249, 226, 175, 0.28);
	--alert-danger-bg: rgba(243, 139, 168, 0.16);
	--alert-danger-text: #f38ba8;
	--alert-danger-border: rgba(243, 139, 168, 0.3);

	--focus-ring: 0 0 0 2px var(--bg-default), 0 0 0 4px rgba(203, 166, 247, 0.3);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-normal: 0ms;
		--duration-slow: 0ms;
	}
}

.radix-themes {
	--default-font-family: var(--font-manrope);
}
