/*
 * App-specific base styles and token refinements.
 *
 * The COSMIC design tokens (colors, type, spacing, radii, shadows,
 * motion, light/dark theming) live in the shared
 * @lhamacorplabs/design-tokens package, imported in
 * src/routes/+layout.svelte. This file only adds:
 *   - app-level refinements on top of those tokens (typography, surface
 *     layering for the sidebar/main pane, elevation, motion)
 *   - old variable names kept as aliases so existing component code
 *     (--bg-primary, --border-color, etc.) keeps working
 *   - semantic state colors specific to this app (unread/mention/muted)
 *   - the reset, typography defaults, and shared component classes
 *     (.btn/.icon-button/.badge/.alert/.label-upper)
 *
 * :root[data-theme=...] (specificity 0,2,0) intentionally outranks the
 * package's un-attributed :root defaults (0,1,0), so overrides here win
 * regardless of stylesheet load order.
 */

:root {
	color-scheme: light;

	/* UI text is set in Inter; the mono face is reserved for things that
	   benefit from fixed-width glyphs (invite codes, URLs, versions). */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-ui: var(--font-sans);

	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);

	/* --- Legacy aliases so existing components keep working unchanged.
	   These are lazily resolved against the tokens, so they auto-update
	   per theme without needing to be redeclared. --- */
	--bg-primary: var(--surface);
	--bg-secondary: var(--surface-hover);
	--bg-tertiary: var(--surface-alt);
	--border-color: var(--border);
	--border-light: var(--border);
	--shadow: var(--shadow-sm);
	--shadow-hover: var(--shadow-md);
	--shadow-elevated: var(--shadow-lg);
	--success: var(--success-text);
	--success-subtle: var(--success-bg);
	--danger-subtle: var(--error-bg);
	--warning: var(--warning-text);
	--warning-subtle: var(--warning-bg);
	--radius-xl: 22px;

	/* Semantic state colors - unread/mention/muted indicators used across
	   the chat list and message thread. */
	--state-unread: var(--accent);
	--state-mention: var(--warning-text);
	--state-mention-subtle: var(--warning-bg);
	--state-muted: var(--text-muted);
	--state-online: var(--success-text);
}

/* ---- Light theme ---- */
:root[data-theme='light'] {
	color-scheme: light;

	--bg-gradient: #ffffff;
	--app-bg: #ffffff;
	--sidebar-bg: #f7f7f9;
	--sidebar-border: rgba(15, 15, 30, 0.07);
	--sidebar-item-hover: rgba(15, 15, 30, 0.045);
	--sidebar-item-active: rgba(15, 15, 30, 0.07);

	--surface: #ffffff;
	--surface-hover: #f4f4f6;
	--surface-alt: #ececf0;
	--panel-bg: #ffffff;

	--text-primary: #16161d;
	--text-secondary: #54545f;
	--text-muted: #8b8b96;

	--border: rgba(15, 15, 30, 0.08);
	--border-hover: rgba(15, 15, 30, 0.14);
	--input-bg: #ffffff;

	/* Pastel identity colors (avatars, author names) are darkened by this
	   much on light surfaces so they keep enough contrast. */
	--identity-ink: 62%;

	--bubble-other: #f1f1f4;
	--bubble-own: var(--accent);
	--bubble-own-text: #ffffff;

	--shadow-sm: 0 1px 2px rgba(16, 16, 32, 0.05);
	--shadow-md: 0 4px 12px -2px rgba(16, 16, 32, 0.08), 0 1px 3px rgba(16, 16, 32, 0.05);
	--shadow-lg: 0 16px 40px -8px rgba(16, 16, 32, 0.16), 0 2px 6px rgba(16, 16, 32, 0.06);
	--overlay-bg: rgba(16, 16, 28, 0.32);
}

/* ---- Dark theme ----
   Accent family pinned to the app's reviewed purple (#9184d9) rather than
   the package's more saturated #7c6fee, so every accent-driven surface
   matches consistently. */
:root[data-theme='dark'] {
	color-scheme: dark;

	--bg-gradient: #0c0c10;
	--app-bg: #0c0c10;
	--sidebar-bg: #111116;
	--sidebar-border: rgba(255, 255, 255, 0.06);
	--sidebar-item-hover: rgba(255, 255, 255, 0.04);
	--sidebar-item-active: rgba(255, 255, 255, 0.07);

	--surface: #16161c;
	--surface-hover: #1c1c23;
	--surface-alt: #24242c;
	--panel-bg: #17171d;

	--text-primary: #ededf2;
	--text-secondary: #a6a6b3;
	--text-muted: #6e6e7c;

	--border: rgba(255, 255, 255, 0.07);
	--border-hover: rgba(255, 255, 255, 0.13);
	--input-bg: rgba(255, 255, 255, 0.03);

	--accent: #9184d9;
	--accent-hover: #a89de3;
	--accent-contrast: #0b0b0f;
	--accent-subtle: rgba(145, 132, 217, 0.12);
	--accent-shadow: rgba(145, 132, 217, 0.22);
	--accent-glow: 0 0 0 3px rgba(145, 132, 217, 0.32), 0 0 24px rgba(145, 132, 217, 0.22);
	--border-focus: #9184d9;
	--focus-ring: rgba(145, 132, 217, 0.28);

	--identity-ink: 100%;

	--bubble-other: #1d1d24;
	--bubble-own: #2f2a52;
	--bubble-own-text: #f1effc;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
	--shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.35);
	--overlay-bg: rgba(0, 0, 0, 0.55);
}

/* Reset and base styles */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-family: var(--font-ui);
	font-feature-settings: 'cv11', 'ss01', 'ss03';
	line-height: 1.5;
	background: var(--app-bg, var(--bg-gradient));
	color: var(--text-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	background: var(--app-bg, var(--bg-gradient));
	color: var(--text-primary);
	transition: background-color 0.2s ease, color 0.2s ease;
	min-height: 100vh;
	min-height: 100dvh;
	-webkit-text-size-adjust: 100%;
	touch-action: pan-x pan-y;
	overscroll-behavior: none;
	overflow: hidden;
	position: fixed;
	width: 100%;
}

::selection {
	background: var(--accent-subtle);
	color: inherit;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary);
	margin-bottom: 0.75rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

h1 {
	font-size: 1.75rem;
	letter-spacing: -0.025em;
}

h2 {
	font-size: 1.375rem;
	letter-spacing: -0.02em;
}

h3 {
	font-size: 1.125rem;
}

p {
	color: var(--text-secondary);
	margin-bottom: 0.75rem;
}

/* Small uppercase, letter-spaced label - section/field headers */
.label-upper {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Form elements */
input, button, select, textarea {
	font-family: inherit;
	font-size: 0.9375rem;
}

input, textarea, select {
	background: var(--input-bg);
	border: 1px solid var(--border-hover);
	color: var(--text-primary);
	padding: 0.625rem 0.875rem;
	border-radius: var(--radius-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	width: 100%;
}

input:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled) {
	border-color: color-mix(in srgb, var(--text-muted) 45%, transparent);
}

input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--border-focus);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

input::placeholder, textarea::placeholder {
	color: var(--text-muted);
}

:focus-visible {
	outline: 2px solid var(--border-focus);
	outline-offset: 2px;
}

input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: none;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.25rem;
	padding: 0 1rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-weight: 550;
	font-size: 0.875rem;
	letter-spacing: -0.005em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
		box-shadow 0.15s ease, transform 0.1s ease;
	gap: 0.4rem;
	user-select: none;
}

.btn:active:not(:disabled) {
	transform: scale(0.98);
}

.btn-primary {
	background: var(--accent);
	color: var(--accent-contrast);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px var(--accent-shadow);
}

.btn-primary:hover:not(:disabled) {
	background: var(--accent-hover);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 12px var(--accent-shadow);
}

.btn-danger {
	background: var(--danger);
	color: #fff;
}

:root[data-theme='dark'] .btn-danger {
	color: #1a0a0a;
}

.btn-danger:hover:not(:disabled) {
	background: var(--danger-hover);
}

.btn-ghost {
	background: transparent;
	color: var(--text-primary);
	border-color: var(--border-hover);
}

.btn-ghost:hover:not(:disabled) {
	background: var(--surface-hover);
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Square, borderless icon button used across headers/toolbars */
.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.icon-button:hover:not(:disabled) {
	background: var(--surface-hover);
	color: var(--text-primary);
}

.icon-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Cards */
.card {
	background: var(--panel-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 1.25rem;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.15s ease;
}

.card:hover {
	box-shadow: var(--shadow-md);
}

/* Badges / pills - roles, statuses, tags */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 0.1875rem 0.5rem;
	border-radius: var(--radius-pill);
	font-size: 0.6875rem;
	font-weight: 600;
	background: var(--accent-subtle);
	color: var(--accent);
}

.badge-success {
	background: var(--success-bg);
	color: var(--success-text);
}

.badge-error {
	background: var(--error-bg);
	color: var(--error-text);
}

/* Alerts */
.alert {
	padding: 0.625rem 0.875rem;
	border-radius: var(--radius-sm);
	margin-bottom: 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.45;
}

.alert-error {
	background: var(--error-bg);
	color: var(--error-text);
	border: 1px solid var(--error-border);
}

.alert-success {
	background: var(--success-bg);
	color: var(--success-text);
	border: 1px solid var(--success-border);
}

.alert-warning {
	background: var(--warning-bg);
	color: var(--warning-text);
	border: 1px solid var(--warning-border);
}

/* Focused panel glow - use sparingly, on one primary "hero" surface */
.panel-focused {
	box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-lg);
}

/* Animations */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes popIn {
	from {
		opacity: 0;
		transform: scale(0.97) translateY(4px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.fade-in {
	animation: fadeIn 0.3s var(--ease-out-expo);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* Responsive design */
@media (max-width: 768px) {
	h1 {
		font-size: 1.5rem;
	}

	.card {
		padding: 1rem;
	}
}

/* Scrollbar styling */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--border-hover) transparent;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

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

::-webkit-scrollbar-thumb {
	background: var(--border-hover);
	border-radius: 999px;
	border: 3px solid transparent;
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
	background-clip: padding-box;
}