/* tiv-design-system */

	/* ============ DESIGN TOKENS ============ */
	:root{
		/* Colors - Brand */
		--tiv-ink: #0a4a4a;
		--tiv-ink-soft: #1a5a5a;
		--tiv-ink-muted: #5a6b6b;
		--tiv-ink-faint: #8a9696;
		--tiv-accent: #106050;
		--tiv-accent-bright: #29a579;
		--tiv-accent-deep: #0a4a4a;
		--tiv-warm: #e59875;
		--tiv-warm-soft: #f7b79a;
		--tiv-cream: #fdf6f0;
		--tiv-cream-deep: #f8decd;
		--tiv-line: rgba(10,74,74,.08);
		--tiv-line-strong: rgba(10,74,74,.16);
		--tiv-surface: #ffffff;
		--tiv-surface-warm: #fdf6f0;

		/* Typography - System Fonts Fallback (FOIT-frei) */
		--tiv-font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
		--tiv-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
		--tiv-font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;

		/* Type Scale - Perfect Fourth (1.333) */
		--tiv-text-xs: 0.75rem;     /* 12px */
		--tiv-text-sm: 0.875rem;    /* 14px */
		--tiv-text-base: 1rem;      /* 16px */
		--tiv-text-lg: 1.125rem;    /* 18px */
		--tiv-text-xl: 1.333rem;    /* 21px */
		--tiv-text-2xl: 1.777rem;   /* 28px */
		--tiv-text-3xl: 2.369rem;   /* 38px */
		--tiv-text-4xl: 3.157rem;   /* 50px */

		/* Fluid Headings (responsive ohne MQ) */
		--tiv-h1: clamp(2rem, 4.5vw, 3.157rem);
		--tiv-h2: clamp(1.5rem, 3vw, 2.369rem);
		--tiv-h3: clamp(1.25rem, 2.2vw, 1.777rem);

		/* Spacing - 4px grid */
		--tiv-s1: 0.25rem;   /* 4 */
		--tiv-s2: 0.5rem;    /* 8 */
		--tiv-s3: 0.75rem;   /* 12 */
		--tiv-s4: 1rem;      /* 16 */
		--tiv-s5: 1.5rem;    /* 24 */
		--tiv-s6: 2rem;      /* 32 */
		--tiv-s7: 3rem;      /* 48 */
		--tiv-s8: 4rem;      /* 64 */
		--tiv-s9: 6rem;      /* 96 */

		/* Radii */
		--tiv-r-sm: 6px;
		--tiv-r-md: 10px;
		--tiv-r-lg: 14px;
		--tiv-r-xl: 20px;
		--tiv-r-2xl: 28px;
		--tiv-r-full: 999px;

		/* Shadows - subtil */
		--tiv-shadow-xs: 0 1px 2px rgba(10,74,74,.04);
		--tiv-shadow-sm: 0 2px 6px rgba(10,74,74,.06), 0 1px 2px rgba(10,74,74,.04);
		--tiv-shadow-md: 0 6px 18px rgba(10,74,74,.08), 0 2px 4px rgba(10,74,74,.04);
		--tiv-shadow-lg: 0 16px 40px rgba(10,74,74,.10), 0 4px 12px rgba(10,74,74,.05);
		--tiv-shadow-glow: 0 0 0 4px rgba(41,165,121,.18);

		/* Motion */
		--tiv-ease: cubic-bezier(.2, 0, 0, 1);
		--tiv-ease-out: cubic-bezier(.16, 1, .3, 1);
		--tiv-dur-fast: 150ms;
		--tiv-dur: 220ms;
		--tiv-dur-slow: 360ms;

		/* Layout */
		--tiv-container: 1200px;
		--tiv-content: 720px;
		--tiv-prose: 65ch;
	}

	/* Reduced Motion Respect */
	@media (prefers-reduced-motion: reduce){
		:root{ --tiv-dur-fast: 0ms; --tiv-dur: 0ms; --tiv-dur-slow: 0ms; }
	}

	/* ============ UTILITY CLASSES ============ */
	.tiv-prose{max-width:var(--tiv-prose);font-family:var(--tiv-font-body);font-size:var(--tiv-text-base);line-height:1.65;color:var(--tiv-ink-soft);}
	.tiv-display{font-family:var(--tiv-font-display);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--tiv-ink);}
	.tiv-eyebrow{font-family:var(--tiv-font-body);font-size:var(--tiv-text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--tiv-accent-bright);}

	/* Performance: content-visibility on offscreen blocks */
	.tiv-cv-auto{content-visibility:auto;contain-intrinsic-size:1px 500px;}

	/* ============ COMPONENT RESET (inside our scopes) ============ */
	[class*="tiv-"]:not(input):not(textarea):not(button):not(select){-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
	a[class*="tiv-"]{color:inherit;}
	[class*="tiv-"] *{box-sizing:border-box;}

	/* ============ FOCUS STATES (Accessibility) ============ */
	[class*="tiv-"]:focus-visible{outline:none;box-shadow:var(--tiv-shadow-glow);border-radius:var(--tiv-r-sm);}
	[class*="tiv-"] button:focus-visible,[class*="tiv-"] a:focus-visible,[class*="tiv-"] input:focus-visible{outline:none;box-shadow:var(--tiv-shadow-glow);}