/** * Global Variables — Andreas Tesch Design * Single Source of Truth für alle CSS-Werte * * Prefix: --tesch- * * REGEL: Kein px in Komponenten-CSS. * Immer diese Variablen verwenden. * * FARBEN: Alle als RGB-Triplets definiert (R, G, B). * Nutzung immer via rgba(): * color: rgba(var(--tesch-color-primary), 1); (solid) * color: rgba(var(--tesch-color-primary), 0.8); (80%) */ :root { /* ============================================ BRAND COLORS — vom Kunden befüllen (R, G, B) ============================================ */ --tesch-color-primary: 0, 0, 0; /* ← Hauptfarbe eintragen */ --tesch-color-primary-dark: 0, 0, 0; /* ← Hover/Darker Variante */ --tesch-color-primary-light: 0, 0, 0; /* ← Hellere Variante */ --tesch-color-secondary: 0, 0, 0; /* ← Sekundärfarbe eintragen */ --tesch-color-secondary-dark: 0, 0, 0; /* ============================================ NEUTRAL COLORS — Standard, kaum ändern ============================================ */ --tesch-color-black: 14, 14, 14; /* #0E0E0E */ --tesch-color-white: 255, 255, 255; /* #FFFFFF */ --tesch-color-gray-mid: 158, 158, 158; /* #9E9E9E Borders, Platzhalter */ --tesch-color-gray-light: 247, 247, 247; /* #F7F7F7 Hintergründe */ --tesch-color-text: var(--tesch-color-primary); /* Haupttext */ --tesch-color-text-muted: var(--tesch-color-primary-light); /* Sekundärtext */ --tesch-color-border: var(--tesch-color-gray-mid); /* Standard Border */ /* ============================================ FEEDBACK COLORS (R, G, B) ============================================ */ --tesch-color-success: 16, 185, 129; /* #10B981 */ --tesch-color-warning: 245, 158, 11; /* #F59E0B */ --tesch-color-error: 239, 68, 68; /* #EF4444 */ --tesch-color-info: 59, 130, 246; /* #3B82F6 */ /* ============================================ SPACING — Base 12px (Uncode-Grid: 12 / 36 / 72) ============================================ */ --tesch-spacing-base: 12px; --tesch-spacing-xs: calc(var(--tesch-spacing-base) * 0.5); /* 6px */ --tesch-spacing-sm: calc(var(--tesch-spacing-base) * 0.75); /* 9px */ --tesch-spacing-md: calc(var(--tesch-spacing-base) * 1); /* 12px */ --tesch-spacing-lg: calc(var(--tesch-spacing-base) * 1.5); /* 18px — Uncode half */ --tesch-spacing-xl: calc(var(--tesch-spacing-base) * 3); /* 36px — Uncode single */ --tesch-spacing-2xl: calc(var(--tesch-spacing-base) * 4); /* 48px */ --tesch-spacing-3xl: calc(var(--tesch-spacing-base) * 6); /* 72px — Uncode double */ --tesch-spacing-4xl: calc(var(--tesch-spacing-base) * 8); /* 96px */ /* ============================================ TYPOGRAPHY ============================================ */ /* Familien wie in style.css @font-face und in den Uncode Theme Options (Typography → Custom font families → Manually Entered). Gewicht über font-weight wählen, damit der echte Schnitt geladen wird. */ --tesch-font-heading: 'Tausend', system-ui, sans-serif; --tesch-font-text: 'Nice Text', system-ui, sans-serif; --tesch-font-regular: var(--tesch-font-text); --tesch-font-italic: var(--tesch-font-text); --tesch-font-bold: var(--tesch-font-heading); --tesch-font-bold-italic: var(--tesch-font-text); --tesch-font-weight-normal: 400; --tesch-font-weight-medium: 500; --tesch-font-weight-semibold: 600; --tesch-font-weight-bold: 700; --tesch-line-height-tight: 1.2; --tesch-line-height-normal: 1.5; --tesch-line-height-loose: 1.75; /* Font Sizes — fluid, via global-typography.css Klassen Hier nur für direkte var()-Nutzung in Komponenten */ --tesch-font-size-xs: clamp(0.625rem, 0.57rem + 0.27vw, 0.813rem); /* 10→13px */ --tesch-font-size-sm: clamp(0.75rem, 0.68rem + 0.36vw, 1rem); /* 12→16px */ --tesch-font-size-base: clamp(0.875rem, 0.81rem + 0.36vw, 1.125rem); /* 14→18px */ --tesch-font-size-lg: clamp(1rem, 0.93rem + 0.36vw, 1.25rem); /* 16→20px */ --tesch-font-size-xl: clamp(1.125rem, 1.02rem + 0.54vw, 1.5rem); /* 18→24px */ --tesch-font-size-2xl: clamp(1.313rem, 1.19rem + 0.71vw, 1.813rem); /* 21→29px */ /* ============================================ BORDERS & RADIEN ============================================ */ --tesch-border-width: 1px; --tesch-border-color: rgba(var(--tesch-color-border), 1); --tesch-border-standard: var(--tesch-border-width) solid rgba(var(--tesch-color-border), 1); --tesch-border-radius-sm: calc(var(--tesch-spacing-base) * 0.25); /* 3px */ --tesch-border-radius-md: calc(var(--tesch-spacing-base) * 0.5); /* 6px */ --tesch-border-radius-lg: calc(var(--tesch-spacing-base) * 1); /* 12px */ --tesch-border-radius-xl: calc(var(--tesch-spacing-base) * 2); /* 24px */ --tesch-border-radius-pill: 9999px; /* ============================================ SHADOWS ============================================ */ --tesch-shadow-sm: 0 1px 3px 0 rgba(var(--tesch-color-black), 0.1), 0 1px 2px -1px rgba(var(--tesch-color-black), 0.1); --tesch-shadow-md: 0 4px 6px -1px rgba(var(--tesch-color-black), 0.1), 0 2px 4px -2px rgba(var(--tesch-color-black), 0.1); --tesch-shadow-lg: 0 10px 15px -3px rgba(var(--tesch-color-black), 0.1), 0 4px 6px -4px rgba(var(--tesch-color-black), 0.1); --tesch-shadow-xl: 0 20px 25px -5px rgba(var(--tesch-color-black), 0.1), 0 8px 10px -6px rgba(var(--tesch-color-black), 0.1); /* ============================================ TRANSITIONS ============================================ */ --tesch-transition-fast: 0.15s ease-in-out; --tesch-transition-normal: 0.3s ease-in-out; --tesch-transition-slow: 0.5s ease-in-out; /* ============================================ Z-INDEX ============================================ */ --tesch-z-below: -1; --tesch-z-base: 1; --tesch-z-dropdown: 50; --tesch-z-sticky: 100; --tesch-z-overlay: 200; --tesch-z-modal: 300; --tesch-z-toast: 400; /* ============================================ LAYOUT ============================================ */ --tesch-container-max: calc(var(--tesch-spacing-base) * 100); /* 1200px */ --tesch-container-padding: var(--tesch-spacing-xl); /* 36px */ }