/* * Design Tokens — enchase * Quelle: enchase-brand-guide.md §2, §3, §8 + Architektur 02_architecture.md §5 * Diese Datei wird im jeder Seite vor allen anderen Stylesheets geladen. */ :root { /* === Brand-Farben (verbindlich) === */ --enchase-primary: #033642; --enchase-accent: #48B7B4; --enchase-bg-light: #F7F7F7; --enchase-bg-dark: #0E1F28; --enchase-white: #FFFFFF; --enchase-text-muted: #5A6F77; /* === Tints (color-mix mit transparent → erlaubt Layering) === */ --enchase-primary-10: color-mix(in srgb, var(--enchase-primary) 10%, transparent); --enchase-primary-20: color-mix(in srgb, var(--enchase-primary) 20%, transparent); --enchase-primary-40: color-mix(in srgb, var(--enchase-primary) 40%, transparent); --enchase-primary-60: color-mix(in srgb, var(--enchase-primary) 60%, transparent); --enchase-primary-80: color-mix(in srgb, var(--enchase-primary) 80%, transparent); --enchase-accent-10: color-mix(in srgb, var(--enchase-accent) 10%, transparent); --enchase-accent-20: color-mix(in srgb, var(--enchase-accent) 20%, transparent); --enchase-accent-40: color-mix(in srgb, var(--enchase-accent) 40%, transparent); /* === Typografie === */ --enchase-font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --enchase-font-feature-numerics: 'tnum' 1, 'lnum' 1; --enchase-h1-size: clamp(2.25rem, 4vw + 1rem, 3.4375rem); --enchase-h1-lh: 1.1; --enchase-h2-size: clamp(1.875rem, 3vw + 1rem, 2.75rem); --enchase-h2-lh: 1.2; --enchase-h3-size: clamp(1.625rem, 2vw + 1rem, 2.25rem); --enchase-h3-lh: 1.2; --enchase-h4-size: clamp(1.375rem, 1.5vw + 1rem, 1.875rem); --enchase-h4-lh: 1.2; --enchase-h5-size: 1.5625rem; --enchase-h5-lh: 1.3; --enchase-h6-size: 1.3125rem; --enchase-h6-lh: 1.3; --enchase-p-size: 1rem; --enchase-p-lh: 1.6; --enchase-small-size: 0.875rem; --enchase-small-lh: 1.5; --enchase-fw-regular: 400; --enchase-fw-medium: 500; --enchase-fw-semibold: 600; --enchase-fw-bold: 700; --enchase-fw-extrabold: 800; /* === Spacing-Skala === */ --enchase-space-0: 0; --enchase-space-1: 0.25rem; --enchase-space-2: 0.5rem; --enchase-space-3: 0.75rem; --enchase-space-4: 1rem; --enchase-space-5: 1.5rem; --enchase-space-6: 2rem; --enchase-space-7: 3rem; --enchase-space-8: 4rem; --enchase-space-9: 6rem; --enchase-space-10: 8rem; /* === Container === */ --enchase-container-max: 1280px; --enchase-container-narrow: 960px; --enchase-container-text: 680px; --enchase-container-padding: clamp(1rem, 4vw, 2rem); /* === Radius === */ --enchase-radius-sm: 4px; --enchase-radius-md: 8px; --enchase-radius-lg: 16px; --enchase-radius-pill: 999px; /* === Shadows === */ --enchase-shadow-1: 0 1px 2px rgba(3, 54, 66, 0.08); --enchase-shadow-2: 0 4px 16px rgba(3, 54, 66, 0.10); --enchase-shadow-3: 0 16px 48px rgba(3, 54, 66, 0.14); /* === Motion === */ --enchase-easing-standard: cubic-bezier(0.2, 0, 0, 1); --enchase-easing-emphasis: cubic-bezier(0.3, 0, 0.2, 1); --enchase-duration-fast: 150ms; --enchase-duration-base: 250ms; --enchase-duration-slow: 400ms; /* === Z-Index-Skala === */ --enchase-z-base: 1; --enchase-z-sticky: 100; --enchase-z-overlay: 500; --enchase-z-modal: 1000; --enchase-z-toast: 2000; } @media (prefers-reduced-motion: reduce) { :root { --enchase-duration-fast: 1ms; --enchase-duration-base: 1ms; --enchase-duration-slow: 1ms; } }