@import "tailwindcss";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

@theme {
	--color-paper: #f2f1ec;
	--color-surface: #fbfaf6;
	--color-ink: #14161a;
	--color-ink-2: #4c5157;
	--color-ink-3: #8a8f95;
	--color-rule: #dedcd3;
	--color-signal: #c43a22;
	--color-link: #2b4a9b;
	--shadow-lift: 0 1.5rem 3rem -1.5rem rgb(20 22 26 / 0.18);
	--color-positive: #2e7d5b;
	--color-caution: #b4761a;
	--color-shot-1: var(--color-rule);
	--color-shot-2: var(--color-ink-3);
	--container-page: 63rem;
	--container-read: 38rem;
	--font-display: var(--font-archivo), system-ui, sans-serif;
	--font-body: var(--font-source-serif), Georgia, serif;
	--font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;
	--text-micro: 0.6875rem;
	--text-small: 0.8125rem;
	--text-base: 1.0625rem;
	--text-lead: 1.25rem;
	--text-title: 1.75rem;
	--text-hero: clamp(2.25rem, 4vw, 3.25rem);
	--text-plate: clamp(2rem, 5vw, 3.5rem);
	--text-mark: clamp(5rem, 13vw, 10rem);
	--tracking-label: 0.28em;
	--tracking-mark: 0.18em;
	--tracking-plate: 0.42em;
	--tracking-badge: 0.24em;
	--tracking-chip: 0.14em;
	--aspect-cover: 21 / 9;
	--aspect-shot: 16 / 10;
	--breakpoint-md: 46rem;
	--animate-rise: rise 0.5s both cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes rise {
	from { opacity: 0; transform: translateY(0.375rem); }
}

:root[data-theme="dark"] {
	--shadow-lift: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.65);
	--color-paper: #121417;
	--color-surface: #191c20;
	--color-ink: #edebe4;
	--color-ink-2: #a9aeb4;
	--color-ink-3: #757a80;
	--color-rule: #2a2e34;
	--color-signal: #e4603f;
	--color-link: #8aa6ee;
	--color-positive: #6dbd97;
	--color-caution: #d9a34e;
	color-scheme: dark;
}

:root[data-theme="light"] {
	--color-paper: #f2f1ec;
	--color-surface: #fbfaf6;
	--color-ink: #14161a;
	--color-ink-2: #4c5157;
	--color-ink-3: #8a8f95;
	--color-rule: #dedcd3;
	--color-signal: #c43a22;
	--color-link: #2b4a9b;
	--color-positive: #2e7d5b;
	--color-caution: #b4761a;
	color-scheme: light;
}

@layer base {
	html {
		background: var(--color-paper);
	}

	body {
		font-family: var(--font-body);
		line-height: 1.6;
	}

	h1,
	h2,
	h3 {
		font-family: var(--font-display);
		font-weight: 600;
		letter-spacing: -0.02em;
		line-height: 1.2;
	}

	a {
		color: var(--color-link);
		text-decoration-thickness: 0.0625rem;
		text-underline-offset: 0.15em;
	}

	:focus-visible {
		outline: 0.125rem solid var(--color-signal);
		outline-offset: 0.125rem;
	}

	::selection {
		background: var(--color-signal);
		color: var(--color-paper);
	}
}

.plate-fill {
	background: var(--plate);
}

:root[data-theme="dark"] .plate-fill {
	background: color-mix(in srgb, var(--plate) 88%, var(--color-paper));
}

.os-theme-logbuch {
	--os-size: 0.625rem;
	--os-padding-perpendicular: 0.125rem;
	--os-padding-axis: 0.125rem;
	--os-track-border-radius: 1rem;
	--os-track-bg: transparent;
	--os-track-bg-hover: transparent;
	--os-track-bg-active: transparent;
	--os-handle-border-radius: 1rem;
	--os-handle-min-size: 2rem;
	--os-handle-interactive-area-offset: 0.25rem;
	--os-handle-bg: color-mix(in srgb, var(--color-ink-3) 50%, transparent);
	--os-handle-bg-hover: color-mix(in srgb, var(--color-ink-3) 75%, transparent);
	--os-handle-bg-active: var(--color-ink-2);
}

.shadow-lift {
	box-shadow: var(--shadow-lift);
}