marktvogt.de/web/src/app.css

@import 'tailwindcss';

/* ── Fonts ───────────────────────────────────────────────── */

@font-face {
	font-family: 'MedievalSharp';
	src: url('/fonts/medievalsharp-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Crimson Pro';
	src: url('/fonts/crimsonpro-400.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Crimson Pro';
	src: url('/fonts/crimsonpro-400i.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* ── Dark mode variant: .dark class only (JS resolves system preference) ── */

@custom-variant dark (&:is(.dark *));

/* ── Theme tokens ────────────────────────────────────────── */

@theme {
	/* Forest green primary */
	--color-primary-50: oklch(0.97 0.02 150);
	--color-primary-100: oklch(0.93 0.04 150);
	--color-primary-200: oklch(0.86 0.08 150);
	--color-primary-300: oklch(0.77 0.13 150);
	--color-primary-400: oklch(0.67 0.16 150);
	--color-primary-500: oklch(0.55 0.16 150);
	--color-primary-600: oklch(0.47 0.14 150);
	--color-primary-700: oklch(0.4 0.12 150);
	--color-primary-800: oklch(0.33 0.09 150);
	--color-primary-900: oklch(0.27 0.07 150);
	--color-primary-950: oklch(0.18 0.05 150);

	/* Gold / amber accent */
	--color-accent-50: oklch(0.98 0.02 75);
	--color-accent-100: oklch(0.94 0.06 70);
	--color-accent-200: oklch(0.88 0.11 65);
	--color-accent-300: oklch(0.82 0.15 60);
	--color-accent-400: oklch(0.75 0.16 58);
	--color-accent-500: oklch(0.68 0.16 55);
	--color-accent-600: oklch(0.58 0.14 55);
	--color-accent-700: oklch(0.48 0.11 55);
	--color-accent-800: oklch(0.4 0.08 55);
	--color-accent-900: oklch(0.32 0.06 55);
	--color-accent-950: oklch(0.22 0.04 55);

	/* Warm stone neutrals (constant scale — dark mode uses dark: utilities) */
	--color-stone-50: oklch(0.98 0.005 70);
	--color-stone-100: oklch(0.96 0.008 60);
	--color-stone-200: oklch(0.92 0.01 55);
	--color-stone-300: oklch(0.87 0.012 50);
	--color-stone-400: oklch(0.71 0.013 55);
	--color-stone-500: oklch(0.56 0.013 58);
	--color-stone-600: oklch(0.45 0.012 58);
	--color-stone-700: oklch(0.38 0.011 55);
	--color-stone-800: oklch(0.32 0.01 50);
	--color-stone-900: oklch(0.25 0.008 45);
	--color-stone-950: oklch(0.17 0.006 40);

	/* Semantic surface colors (overridden in .dark via CSS vars) */
	--color-parchment: oklch(0.96 0.012 70);
	--color-vellum: oklch(0.99 0.006 70);

	/* Danger / brick red */
	--color-danger-50: oklch(0.97 0.015 25);
	--color-danger-100: oklch(0.93 0.04 25);
	--color-danger-200: oklch(0.87 0.08 25);
	--color-danger-300: oklch(0.78 0.12 25);
	--color-danger-400: oklch(0.68 0.15 25);
	--color-danger-500: oklch(0.58 0.16 25);
	--color-danger-600: oklch(0.5 0.15 25);
	--color-danger-700: oklch(0.42 0.12 25);
	--color-danger-800: oklch(0.35 0.09 25);
	--color-danger-900: oklch(0.28 0.06 25);
	--color-danger-950: oklch(0.2 0.04 25);

	/* Typography */
	--font-heading: 'MedievalSharp', cursive;
	--font-sans: 'Crimson Pro', 'Georgia', serif;
}

/* ── Dark surface overrides (.dark class set by JS) ──────── */

:root.dark {
	color-scheme: dark;
	--color-parchment: oklch(0.14 0.007 20);
	--color-vellum: oklch(0.19 0.009 18);
}

/* ── Base layer ──────────────────────────────────────────── */

@layer base {
	body {
		@apply bg-parchment text-stone-800 antialiased;
	}

	.dark body {
		@apply text-stone-200;
	}

	/* Skip-to-content link (visible on focus only) */
	.skip-link {
		@apply bg-primary-700 absolute -top-full left-4 z-50 rounded-b-lg px-4 py-2 text-sm font-medium text-white;
		@apply focus:ring-primary-400 focus:top-0 focus:ring-2 focus:outline-none;
	}

	h1,
	h2,
	h3,
	h4 {
		font-family: var(--font-heading);
	}

	h1 {
		@apply relative pb-3;
	}

	h1::after {
		content: '';
		@apply bg-accent-400 absolute bottom-0 left-0 h-0.5 w-16;
	}

	h1:is([class*='text-center'])::after {
		@apply left-1/2 -translate-x-1/2;
	}

	/* ── Shared form control styles ───────────────────────── */

	input:where(
		:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='submit']):not(
				[type='button']
			):not([type='reset'])
	),
	textarea {
		@apply bg-vellum block w-full rounded-lg border border-stone-300 px-3 py-2 text-sm text-stone-900 shadow-sm transition-colors;
		@apply placeholder-stone-400;
		@apply focus:border-primary-500 focus:ring-primary-500 focus:ring-2 focus:outline-none;
	}

	.dark
		input:where(
			:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='submit']):not(
					[type='button']
				):not([type='reset'])
		),
	.dark textarea {
		@apply border-stone-600 bg-stone-800 text-stone-100 placeholder-stone-500;
	}

	/* Error state */
	input[aria-invalid='true'],
	textarea[aria-invalid='true'] {
		@apply border-danger-400 text-danger-900 placeholder-danger-300;
	}

	.dark input[aria-invalid='true'],
	.dark textarea[aria-invalid='true'] {
		@apply border-danger-500 text-danger-200;
	}

	/* Focus ring offset matches background */
	*:focus-visible {
		--tw-ring-offset-color: var(--color-parchment);
	}
}