@import "tailwindcss";

@theme {
	--color-brand: #f59e0b;       /* amber-400 */
	--color-brand-dim: #d97706;   /* amber-600 */
	--color-surface: #18181b;     /* zinc-900 */
	--color-surface-2: #27272a;   /* zinc-800 */
	--color-surface-3: #3f3f46;   /* zinc-700 */
	--color-muted: #a1a1aa;       /* zinc-400 */
	--color-text: #f4f4f5;        /* zinc-100 */
	--color-border: #3f3f46;      /* zinc-700 */
	--color-danger:  #f87171;      /* red-400 */
	--color-success: #4ade80;      /* green-400 */
}

/* ── Amber theme (default) — same as @theme above, explicit for clarity ── */
[data-theme="amber"] {
	--color-brand:     #f59e0b;
	--color-brand-dim: #d97706;
	--color-surface:   #18181b;
	--color-surface-2: #27272a;
	--color-surface-3: #3f3f46;
	--color-muted:     #a1a1aa;
	--color-text:      #f4f4f5;
	--color-border:    #3f3f46;
	--color-danger:    #f87171;
	--color-success:   #4ade80;
}

/* ── Slate theme — indigo/slate dark ─────────────────────────────────── */
[data-theme="slate"] {
	--color-brand:     #818cf8;   /* indigo-400 */
	--color-brand-dim: #4f46e5;   /* indigo-600 */
	--color-surface:   #0f172a;   /* slate-900 */
	--color-surface-2: #1e293b;   /* slate-800 */
	--color-surface-3: #334155;   /* slate-700 */
	--color-muted:     #94a3b8;   /* slate-400 */
	--color-text:      #f1f5f9;   /* slate-100 */
	--color-border:    #334155;   /* slate-700 */
	--color-danger:    #f87171;   /* red-400 */
	--color-success:   #4ade80;   /* green-400 */
}

/* ── Rose theme — dark pink ───────────────────────────────────────────── */
[data-theme="rose"] {
	--color-brand:     #fb7185;   /* rose-400 */
	--color-brand-dim: #e11d48;   /* rose-600 */
	--color-surface:   #18181b;   /* zinc-900 */
	--color-surface-2: #1c1318;   /* custom dark rose */
	--color-surface-3: #2d1f26;   /* custom dark rose-2 */
	--color-muted:     #a1a1aa;   /* zinc-400 */
	--color-text:      #f4f4f5;   /* zinc-100 */
	--color-border:    #3f2d36;   /* custom rose border */
	--color-danger:    #f87171;   /* red-400 */
	--color-success:   #4ade80;   /* green-400 */
}

/* ── Light amber theme ────────────────────────────────────────────────── */
[data-theme="light"] {
	--color-brand:     #d97706;   /* amber-600 */
	--color-brand-dim: #b45309;   /* amber-700 */
	--color-surface:   #ffffff;
	--color-surface-2: #f4f4f5;   /* zinc-100 */
	--color-surface-3: #e4e4e7;   /* zinc-200 */
	--color-muted:     #71717a;   /* zinc-500 */
	--color-text:      #18181b;   /* zinc-900 */
	--color-border:    #d4d4d8;   /* zinc-300 */
	--color-danger:    #dc2626;   /* red-600 */
	--color-success:   #16a34a;   /* green-600 */
}

/* ── Light slate theme ────────────────────────────────────────────────── */
[data-theme="light-slate"] {
	--color-brand:     #4f46e5;   /* indigo-600 */
	--color-brand-dim: #4338ca;   /* indigo-700 */
	--color-surface:   #f8fafc;   /* slate-50 */
	--color-surface-2: #f1f5f9;   /* slate-100 */
	--color-surface-3: #e2e8f0;   /* slate-200 */
	--color-muted:     #64748b;   /* slate-500 */
	--color-text:      #0f172a;   /* slate-900 */
	--color-border:    #cbd5e1;   /* slate-300 */
	--color-danger:    #dc2626;   /* red-600 */
	--color-success:   #16a34a;   /* green-600 */
}

/* ── Light rose theme ─────────────────────────────────────────────────── */
[data-theme="light-rose"] {
	--color-brand:     #e11d48;   /* rose-600 */
	--color-brand-dim: #be123c;   /* rose-700 */
	--color-surface:   #fff1f2;   /* rose-50 */
	--color-surface-2: #ffe4e6;   /* rose-100 */
	--color-surface-3: #fecdd3;   /* rose-200 */
	--color-muted:     #9f1239;   /* rose-800 at 60% */
	--color-text:      #0f0a0b;   /* near black */
	--color-border:    #fda4af;   /* rose-300 */
	--color-danger:    #dc2626;   /* red-600 */
	--color-success:   #16a34a;   /* green-600 */
}

/* ── Forest theme — dark green ────────────────────────────────────────── */
[data-theme="forest"] {
	--color-brand:     #4ade80;   /* green-400 */
	--color-brand-dim: #16a34a;   /* green-600 */
	--color-surface:   #0a130d;   /* custom near-black green */
	--color-surface-2: #111c14;   /* custom dark green */
	--color-surface-3: #1a2e1e;   /* custom mid green */
	--color-muted:     #6b9a77;   /* custom muted green */
	--color-text:      #e8f5e9;   /* custom light green-tinted white */
	--color-border:    #1e3a24;   /* custom green border */
	--color-danger:    #f87171;   /* red-400 */
	--color-success:   #4ade80;   /* green-400 */
}

/* ── Mono theme — pure dark with white accent ─────────────────────────── */
[data-theme="mono"] {
	--color-brand:     #f4f4f5;   /* zinc-100 — white accent */
	--color-brand-dim: #a1a1aa;   /* zinc-400 */
	--color-surface:   #09090b;   /* zinc-950 */
	--color-surface-2: #18181b;   /* zinc-900 */
	--color-surface-3: #27272a;   /* zinc-800 */
	--color-muted:     #71717a;   /* zinc-500 */
	--color-text:      #f4f4f5;   /* zinc-100 */
	--color-border:    #27272a;   /* zinc-800 */
	--color-danger:    #f87171;   /* red-400 */
	--color-success:   #4ade80;   /* green-400 */
}

/* ── Cyberpunk theme — dark with neon cyan/magenta accents ────────────── */
[data-theme="cyber"] {
	--color-brand:     #22d3ee;   /* cyan-400 — neon cyan */
	--color-brand-dim: #06b6d4;   /* cyan-500 */
	--color-surface:   #050712;   /* custom near-black blue */
	--color-surface-2: #0d1117;   /* custom dark blue-black */
	--color-surface-3: #161b27;   /* custom dark blue */
	--color-muted:     #6272a4;   /* dracula comment blue */
	--color-text:      #e2e8f0;   /* slate-200 */
	--color-border:    #1e2d45;   /* custom dark border */
	--color-danger:    #ff5555;   /* dracula red */
	--color-success:   #50fa7b;   /* dracula green */
}

html {
	background-color: var(--color-surface);
	color: var(--color-text);
}

/* ── Reading typography custom properties ──────────────────────────── */
:root {
	--reading-font: system-ui, -apple-system, sans-serif;
	--reading-size: 1.05rem;
	--reading-line-height: 1.85;
	--reading-max-width: 72ch;
}

/* ── Chapter prose ─────────────────────────────────────────────────── */
.prose-chapter {
	max-width: var(--reading-max-width, 72ch);
	line-height: var(--reading-line-height, 1.85);
	font-family: var(--reading-font);
	font-size: var(--reading-size);
	color: var(--color-muted);
}

.prose-chapter h1,
.prose-chapter h2,
.prose-chapter h3 {
	color: var(--color-text);
	font-weight: 700;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.prose-chapter h1 { font-size: 1.4rem; }
.prose-chapter h2 { font-size: 1.2rem; }
.prose-chapter h3 { font-size: 1.05rem; }

.prose-chapter p {
	margin-bottom: 1.2em;
}

/* Indented paragraph style — book-like, no gap, indent instead */
.prose-chapter.para-indented p {
	text-indent: 2em;
	margin-bottom: 0.35em;
}

.prose-chapter em {
	color: var(--color-muted);
}

.prose-chapter strong {
	color: var(--color-text);
}

.prose-chapter hr {
	border-color: var(--color-border);
	margin: 2em 0;
}

/* ── Reading progress bar ───────────────────────────────────────────── */
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	z-index: 100;
	background: var(--color-brand);
	pointer-events: none;
	transition: width 0.1s linear;
}

/* ── Paginated reader ───────────────────────────────────────────────── */
.paginated-container {
	overflow: hidden;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.paginated-container .prose-chapter {
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* ── Hide scrollbars (used on horizontal carousels) ────────────────── */
.scrollbar-none {
	scrollbar-width: none;       /* Firefox */
	-ms-overflow-style: none;    /* IE / Edge legacy */
}
.scrollbar-none::-webkit-scrollbar {
	display: none;               /* Chrome / Safari / WebKit */
}

/* ── Hero carousel fade ─────────────────────────────────────────────── */
@keyframes fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.animate-fade-in {
	animation: fade-in 0.4s ease-out forwards;
}

/* ── Navigation progress bar ───────────────────────────────────────── */
@keyframes progress-bar {
	0%   { width: 0%; opacity: 1; }
	80%  { width: 90%; opacity: 1; }
	100% { width: 100%; opacity: 0; }
}
.animate-progress-bar {
	animation: progress-bar 4s cubic-bezier(0.1, 0.05, 0.1, 1) forwards;
}

/* ── Respect reduced motion — disable all decorative animations ─────── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ── Footer content-visibility — skip paint for off-screen footer ───── */
footer {
	content-visibility: auto;
	contain-intrinsic-size: auto 80px;
}