/*
 * Schicht 00: Design Tokens der LG Nürnberg.
 * Quelle der Wahrheit für Farben, Abstände und Typografie ist theme.json.
 * Hier stehen nur Werte, die theme.json nicht abbilden kann.
 */

:root {
	/* Marke */
	--lg-color-bordeaux: #7a1838;
	--lg-color-deep-bordeaux: #4d0e24;
	--lg-color-black: #111111;
	--lg-color-white: #ffffff;
	--lg-color-warm-gray: #f3f1ef;

	/* Abgeleitete Flächen und Linien */
	--lg-line-soft: rgba(17, 17, 17, 0.14);
	--lg-line-strong: rgba(17, 17, 17, 0.28);
	--lg-line-on-dark: rgba(255, 255, 255, 0.22);
	--lg-line-on-bordeaux: rgba(255, 255, 255, 0.28);
	--lg-surface-sunken: #ebe8e5;
	--lg-ink-muted: #4a4a4a;
	--lg-ink-on-dark-muted: rgba(255, 255, 255, 0.78);

	/* Typografie */
	--lg-font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	--lg-font-body: "Inter", Arial, Helvetica, sans-serif;
	--lg-tracking-eyebrow: 0.16em;
	--lg-tracking-label: 0.08em;

	/* Schriftgrössen, gespiegelt aus Design.md */
	--lg-step--1: clamp(0.82rem, 0.78rem + 0.15vw, 0.9rem);
	--lg-step-0: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	--lg-step-1: clamp(1.25rem, 1.05rem + 0.7vw, 1.7rem);
	--lg-step-2: clamp(1.7rem, 1.25rem + 1.5vw, 2.6rem);
	--lg-step-3: clamp(2.4rem, 1.5rem + 3vw, 4.4rem);
	--lg-step-4: clamp(3.3rem, 1.8rem + 5vw, 7rem);

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

	/* Layout */
	--lg-gutter: 20px;
	--lg-content: 720px;
	--lg-wide: 1280px;
	--lg-data: 1440px;
	--lg-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
	--lg-header-height: 72px;

	/* Form */
	--lg-radius-small: 4px;
	--lg-radius-card: 8px;
	--lg-border: 1px solid var(--lg-line-soft);
	--lg-shadow-card: 0 14px 40px rgba(17, 17, 17, 0.08);
	--lg-shadow-lift: 0 22px 60px rgba(17, 17, 17, 0.14);

	/* Bewegung */
	--lg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--lg-duration: 220ms;

	/* Fokus */
	--lg-focus-color: var(--lg-color-bordeaux);
	--lg-focus-width: 3px;
	--lg-focus-offset: 3px;
}

@media (min-width: 768px) {
	:root {
		--lg-gutter: 32px;
		--lg-header-height: 84px;
	}
}

@media (min-width: 1200px) {
	:root {
		--lg-gutter: 48px;
	}
}

/*
 * Kontextfarben. Jede Sektion setzt ihren Kontext, alle Komponenten darin
 * lesen daraus. So bleibt eine Karte auf Weiss, Bordeaux und Schwarz lesbar,
 * ohne dass es drei Kartenvarianten braucht.
 */
.lg-context-light {
	--lg-ctx-bg: var(--lg-color-white);
	--lg-ctx-ink: var(--lg-color-black);
	--lg-ctx-ink-muted: var(--lg-ink-muted);
	--lg-ctx-accent: var(--lg-color-bordeaux);
	--lg-ctx-line: var(--lg-line-soft);
	--lg-ctx-surface: var(--lg-color-warm-gray);
	--lg-ctx-focus: var(--lg-color-bordeaux);
}

.lg-context-gray {
	--lg-ctx-bg: var(--lg-color-warm-gray);
	--lg-ctx-ink: var(--lg-color-black);
	--lg-ctx-ink-muted: var(--lg-ink-muted);
	--lg-ctx-accent: var(--lg-color-bordeaux);
	--lg-ctx-line: var(--lg-line-strong);
	--lg-ctx-surface: var(--lg-color-white);
	--lg-ctx-focus: var(--lg-color-bordeaux);
}

.lg-context-bordeaux {
	--lg-ctx-bg: var(--lg-color-bordeaux);
	--lg-ctx-ink: var(--lg-color-white);
	--lg-ctx-ink-muted: var(--lg-ink-on-dark-muted);
	--lg-ctx-accent: var(--lg-color-white);
	--lg-ctx-line: var(--lg-line-on-bordeaux);
	--lg-ctx-surface: var(--lg-color-deep-bordeaux);
	--lg-ctx-focus: var(--lg-color-white);
}

.lg-context-dark {
	--lg-ctx-bg: var(--lg-color-black);
	--lg-ctx-ink: var(--lg-color-white);
	--lg-ctx-ink-muted: var(--lg-ink-on-dark-muted);
	--lg-ctx-accent: var(--lg-color-white);
	--lg-ctx-line: var(--lg-line-on-dark);
	--lg-ctx-surface: #1c1c1c;
	--lg-ctx-focus: var(--lg-color-white);
}