/* =============================================
   Per-app theme tokens (consumed by the shared css/general.css & buttons.css).
   Declared with light-dark() so a single set covers both schemes; the accent
   ramp (--color-primary-*) comes from identity.css + variables.css.
   ============================================= */
:root {
	color-scheme: light dark;

	/* Sibling-kapp bridge tokens */
	--bg:           light-dark(#effcfb, #0e1414);
	--bg-grad-top:  light-dark(#cbfbf1, #0e2a28);
	--surface:      light-dark(#ffffff, #16161d);
	--surface-2:    light-dark(#e6f7f4, #1f1f29);
	--surface-3:    light-dark(#d5efea, #2a2a36);
	--text:         light-dark(#0f1a19, #f4f4f6);
	--text-dim:     light-dark(#5b6b69, #a0a0ad);
	--text-faint:   light-dark(#8a9593, #6c6c79);
	--accent:       light-dark(var(--color-primary-dark), var(--color-primary));
	--accent-2:     light-dark(var(--color-primary-700), var(--color-primary-400));
	--accent-grad:  linear-gradient(135deg,
		light-dark(var(--color-primary-dark), var(--color-primary)) 0%,
		light-dark(var(--color-primary), var(--color-primary-400)) 100%);
	--border:       light-dark(#cbfbf1, #2a2a36);
	--danger:       light-dark(#dc2626, #ef4444);

	/* Semantic tokens (used by the auth page below) — dark-mode parity */
	--color-surface:      light-dark(#ffffff, #16161d);
	--color-surface-alt:  light-dark(#effcfb, #0e1414);
	--color-text:         light-dark(#0f1a19, #f4f4f6);
	--color-text-light:   light-dark(#5b6b69, #a0a0ad);
	--color-border:       light-dark(#cbfbf1, #2a2a36);
}

/* =============================================
   Auth loading / splash
   ============================================= */
.auth-loading {
	position: fixed;
	inset: 0;
	background: var(--color-surface-alt);
}

/* =============================================
   Auth page
   ============================================= */
.auth-page {
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--page-padding);
	background: linear-gradient(160deg, var(--color-surface-alt) 0%, var(--color-surface) 100%);

	.auth-card {
		width: 100%;
		max-width: 380px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-md);
		text-align: center;
	}

	.auth-logo {
		width: 80px;
		height: 80px;
		background: var(--color-primary-100);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color-primary);
		margin-bottom: var(--spacing-sm);
	}

	.auth-title {
		font: var(--font-h3);
		color: var(--color-text);
	}

	.auth-subtitle {
		font: var(--font-body-large-regular);
		color: var(--color-text-light);
		max-width: 280px;
	}

	.auth-hint {
		font: var(--font-body-medium-regular);
		color: var(--color-text-light);
		max-width: 300px;
		line-height: 1.6;
	}

	.auth-field {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: var(--spacing-xs);
		text-align: left;
	}

	.auth-actions {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
		width: 100%;
		margin-top: var(--spacing-sm);

		.btn {
			width: 100%;
		}
	}

	.auth-error {
		font: var(--font-body-small-regular);
		color: var(--color-error);
		background: color-mix(in oklch, var(--color-error) 8%, white);
		padding: 10px 14px;
		border-radius: var(--radius-small);
		width: 100%;
	}

	.auth-dev {
		width: 100%;
		margin-top: var(--spacing-md);
		padding-top: var(--spacing-md);
		border-top: 1px dashed var(--border);
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);

		.auth-dev-label {
			font: var(--font-body-small-semibold);
			color: var(--text-dim);
			margin: 0;
		}

		.input { width: 100%; }
		.btn { width: 100%; }
	}
}

/* =============================================
   Conversations list (Phase 0 placeholder)
   ============================================= */
.conversations {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--page-padding);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);

	.conversations-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--spacing-md);

		h1 {
			font: var(--font-h4);
			color: var(--text);
			margin: 0;
		}
	}

	.conversations-empty {
		margin-top: 20dvh;
		text-align: center;
		color: var(--text-dim);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-sm);

		.empty-icon {
			color: var(--accent);
			opacity: 0.8;
		}
	}
}