/* ==========================================================================
   Tian Theme — Design Tokens (CSS Custom Properties)
   ========================================================================== */

:root {

	/* --- Farben — Basis (dunkel) ----------------------------------------- */
	--color-bg:           #0a0a0a;
	--color-bg-alt:       #111111;
	--color-surface:      #1a1a1a;
	--color-surface-2:    #232323;

	/* --- Farben — Akzent (gold) ----------------------------------------- */
	--color-accent:       #c8a96e;
	--color-accent-2:     #8b6914;
	--color-accent-soft:  #d6bc89;

	/* --- Farben — Text -------------------------------------------------- */
	--color-text:         #e8e8e8;
	--color-text-muted:   #888888;
	--color-text-subtle:  #5a5a5a;
	--color-white:        #ffffff;

	/* --- Farben — Linien & Zustand -------------------------------------- */
	--color-border:       #2a2a2a;
	--color-border-2:     #3a3a3a;
	--color-success:      #6cb45a;
	--color-error:        #d4584d;
	--color-warning:      #d8a14d;

	/* --- Schriftarten --------------------------------------------------- */
	--font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-sans:     'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-serif:    'Source Serif 4', 'Lora', Georgia, serif;
	--font-mono:     'SF Mono', Menlo, Consolas, monospace;

	/* --- Schriftgrößen (fluid) ------------------------------------------ */
	--fs-xs:    0.75rem;
	--fs-sm:    0.875rem;
	--fs-base:  1rem;
	--fs-md:    1.125rem;
	--fs-lg:    1.25rem;
	--fs-xl:    1.5rem;
	--fs-2xl:   clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	--fs-3xl:   clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);
	--fs-4xl:   clamp(3rem,    2rem + 4vw,    5rem);
	--fs-hero:  clamp(3.5rem,  2.5rem + 5vw,  7rem);

	/* --- Zeilenhöhen ---------------------------------------------------- */
	--lh-tight:    1.1;
	--lh-snug:     1.25;
	--lh-normal:   1.5;
	--lh-relaxed:  1.75;
	--lh-loose:    1.9;

	/* --- Letter-Spacing ------------------------------------------------- */
	--ls-tight:   -0.02em;
	--ls-normal:   0;
	--ls-wide:     0.05em;
	--ls-wider:    0.12em;
	--ls-widest:   0.2em;

	/* --- Abstände ------------------------------------------------------- */
	--sp-1:   0.25rem;
	--sp-2:   0.5rem;
	--sp-3:   0.75rem;
	--sp-4:   1rem;
	--sp-5:   1.5rem;
	--sp-6:   2rem;
	--sp-7:   3rem;
	--sp-8:   4rem;
	--sp-9:   6rem;
	--sp-10:  8rem;

	/* --- Section-Padding (fluid) ---------------------------------------- */
	--section-py:  clamp(3rem, 2rem + 5vw, 7rem);

	/* --- Container ------------------------------------------------------ */
	--container-max:    1320px;
	--container-narrow: 880px;
	--container-wide:   1640px;
	--container-px:     clamp(1.25rem, 0.5rem + 2vw, 2.5rem);

	/* --- Radien --------------------------------------------------------- */
	--radius-sm:    2px;
	--radius:       4px;
	--radius-md:    8px;
	--radius-lg:    16px;
	--radius-pill:  999px;

	/* --- Schatten ------------------------------------------------------- */
	--shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
	--shadow:     0 4px 16px rgba(0, 0, 0, 0.5);
	--shadow-lg:  0 12px 48px rgba(0, 0, 0, 0.7);
	--shadow-glow: 0 0 24px rgba(200, 169, 110, 0.18);

	/* --- Übergänge ------------------------------------------------------ */
	--ease:         cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast:     0.18s;
	--dur:          0.32s;
	--dur-slow:     0.6s;

	/* --- Z-Index --------------------------------------------------------- */
	--z-below:     -1;
	--z-base:       0;
	--z-content:    10;
	--z-overlay:    100;
	--z-header:     500;
	--z-modal:      1000;
	--z-toast:      1100;

	/* --- Header-Höhe (für sticky offsets) -------------------------------- */
	--header-h:        80px;
	--header-h-scrolled: 64px;

	/* --- Breakpoints (für Container-Queries / JS) ----------------------- */
	--bp-sm:   480px;
	--bp-md:   768px;
	--bp-lg:   1024px;
	--bp-xl:   1280px;
	--bp-2xl:  1440px;
}

/* Mobile Typografie kompakter (Lesbarkeit auf Phones). */
@media (max-width: 640px) {
	:root {
		--fs-md:    1rem;
		--fs-lg:    1.05rem;
		--fs-xl:    1.2rem;
		--fs-2xl:   clamp(1.4rem,  1.1rem + 1.6vw, 1.75rem);
		--fs-3xl:   clamp(1.65rem, 1.3rem + 2.2vw, 2.1rem);
		--fs-4xl:   clamp(2rem,    1.4rem + 3vw,   2.6rem);
		--fs-hero:  clamp(2rem,    1.6rem + 4vw,   3rem);
	}
}

/* Reduzierte Bewegung respektieren. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0.001s;
		--dur:      0.001s;
		--dur-slow: 0.001s;
	}
}