/* Spacedrive V2 - Color System
 * Colors are defined in packages/ui/style/colors.js
 * and converted to CSS variables here for web/desktop use
 */

:root {
	/* Hue for dark theme */
	--dark-hue: 235;

	/* Accent color */
	--color-accent: 220, 90%, 56%;
	--color-accent-faint: 220, 90%, 64%;
	--color-accent-deep: 220, 90%, 47%;

	/* Text colors (ink) */
	--color-ink: 235, 15%, 92%;
	--color-ink-dull: 235, 10%, 70%;
	--color-ink-faint: 235, 10%, 55%;

	/* Sidebar colors */
	--color-sidebar: 235, 15%, 7%;
	--color-sidebar-box: 235, 15%, 16%;
	--color-sidebar-line: 235, 15%, 23%;
	--color-sidebar-ink: 235, 15%, 92%;
	--color-sidebar-ink-dull: 235, 10%, 70%;
	--color-sidebar-ink-faint: 235, 10%, 55%;
	--color-sidebar-divider: 235, 15%, 17%;
	--color-sidebar-button: 235, 15%, 18%;
	--color-sidebar-selected: 235, 15%, 24%;

	/* Main app colors */
	--color-app: 235, 15%, 13%;
	--color-app-box: 235, 15%, 18%;
	--color-app-dark-box: 235, 10%, 7%;
	--color-app-overlay: 235, 15%, 16%;
	--color-app-line: 235, 15%, 23%;
	--color-app-frame: 235, 15%, 25%;
	--color-app-button: 235, 15%, 20%;
	--color-app-hover: 235, 15%, 22%;
	--color-app-selected: 235, 15%, 24%;

	/* Menu colors (for dropdowns, context menus) */
	--color-menu: 235, 15%, 13%;
	--color-menu-line: 235, 15%, 23%;
	--color-menu-hover: 235, 15%, 20%;
	--color-menu-selected: 235, 15%, 24%;
	--color-menu-shade: 235, 15%, 8%;
	--color-menu-ink: 235, 15%, 92%;
	--color-menu-faint: 235, 10%, 55%;
}

/* Top bar blur effect (macOS specific) */
.top-bar-blur {
	backdrop-filter: saturate(120%) blur(18px);
}

/* Window frame border (macOS) */
.frame::before {
	content: "";
	pointer-events: none;
	user-select: none;
	position: absolute;
	inset: 0px;
	border-radius: inherit;
	padding: 1px;
	background: var(--color-app-frame);
	mask: linear-gradient(black, black) content-box content-box,
		linear-gradient(black, black);
	mask-composite: xor;
	-webkit-mask-composite: xor;
	z-index: 9999;
}

/* Scrollbar styling */
.no-scrollbar::-webkit-scrollbar {
	display: none;
}

.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* Fade mask for scrollable content */
.mask-fade-out {
	mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
}

/* Checkerboard pattern for transparent images */
.checkerboard {
	background-image: linear-gradient(45deg, #16161b 25%, transparent 25%),
		linear-gradient(-45deg, #16161b 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #16161b 75%),
		linear-gradient(-45deg, transparent 75%, #16161b 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Animated gradient for audio player background */
.audio-gradient {
	position: relative;
	background: #000;
}

.audio-gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: audio-gradient-shift 15s ease infinite;
	opacity: 0.7;
}

.audio-gradient::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.8) 100%);
	pointer-events: none;
}

.audio-gradient.paused::before {
	animation-play-state: paused;
}

@keyframes audio-gradient-shift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}