/* ============================================================================= tokens.css — Design System / Single Source of Truth Alle Farben, Abstände, Typo-Stufen, Radien, Schatten, Zeiten und Z-Index-Werte werden ausschließlich hier definiert. Keine Magic Numbers in anderen Dateien. ========================================================================== */ :root { /* --------------------------------------------------------------------- FARBEN — OLED-first. Der Grundton ist ein echtes Nahschwarz mit minimalem Blaustich, damit große Flächen auf OLED wirklich schwarz erscheinen und Lichtakzente Tiefe erzeugen. --------------------------------------------------------------------- */ --c-bg: #05070a; /* Seitengrund */ --c-bg-raised: #080b10; /* leicht erhöhte Fläche */ --c-bg-panel: #0b0f16; /* Panels, abgesetzte Flächen */ /* Kontrastwerte gegen --c-bg (#05070a), gemessen nach WCAG 2.2: --c-text #f2f5f9 ≈ 17.9 : 1 --c-text-muted #98a4b3 ≈ 7.9 : 1 --c-text-faint #757f8b ≈ 4.9 : 1 --c-text-faint trägt die kleinen Monospace-Labels (12 px). Der Wert liegt bewusst über dem AA-Minimum von 4.5 : 1, weil die WebGL-Szene den Untergrund stellenweise aufhellt und den Kontrast dadurch senkt. */ --c-text: #f2f5f9; /* Primärtext */ --c-text-muted: #98a4b3; /* Sekundärtext */ --c-text-faint: #757f8b; /* Tertiär / technische Labels */ --c-accent: #3d7bfa; /* Cobalt — Primärakzent */ --c-accent-soft: #7fa9ff; /* aufgehellt, für Text auf Dunkel */ --c-accent-deep: #1d4ed8; /* abgedunkelt, für Verläufe */ --c-signal: #22c7e0; /* Cyan — ausschließlich für Impulse/Status */ --c-warn: #f2b23c; --c-error: #ff6b6b; --c-success: #34d399; /* Linien: bewusst als rgba, damit sie sich auf jedem Untergrund einfügen */ --c-line: rgb(148 163 184 / 0.13); --c-line-strong: rgb(148 163 184 / 0.26); --c-line-accent: rgb(61 123 250 / 0.42); /* Flächen mit Transparenz (Header, Overlays) */ --c-veil: rgb(5 7 10 / 0.72); --c-veil-solid: rgb(5 7 10 / 0.94); --c-hover: rgb(148 163 184 / 0.05); /* Fokus — muss auf allen Untergründen sichtbar bleiben (WCAG 2.2) */ --c-focus: #8ab4ff; /* --------------------------------------------------------------------- TYPOGRAFIE Keine externen Fonts. "Inter" wird genutzt, falls lokal installiert, sonst greift die native UI-Schrift des Systems (Segoe UI Variable / SF Pro / Roboto). Damit: null Netzwerk-Requests, null Drittanbieter. --------------------------------------------------------------------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Fluide Typo-Skala. Bezug: 320px … 1600px Viewport. */ --t-mono: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem); /* technische Labels */ --t-xs: clamp(0.75rem, 0.72rem + 0.16vw, 0.8125rem); --t-sm: clamp(0.8125rem,0.78rem + 0.18vw, 0.9375rem); --t-base: clamp(0.9375rem,0.90rem + 0.24vw, 1.0625rem); --t-lg: clamp(1.0625rem,1.00rem + 0.36vw, 1.25rem); --t-xl: clamp(1.25rem, 1.13rem + 0.62vw, 1.625rem); --t-2xl: clamp(1.5rem, 1.28rem + 1.10vw, 2.25rem); --t-3xl: clamp(1.875rem, 1.50rem + 1.85vw, 3.25rem); --t-4xl: clamp(2.25rem, 1.60rem + 3.20vw, 4.5rem); --t-display: clamp(2.75rem, 1.20rem + 7.60vw, 9rem); /* Hero-Name */ --lh-tight: 1.04; --lh-snug: 1.22; --lh-normal: 1.5; --lh-relaxed: 1.68; --ls-display: -0.045em; --ls-heading: -0.025em; --ls-normal: -0.011em; --ls-mono: 0.14em; /* Versalabstand für technische Labels */ --ls-mono-wide:0.24em; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; /* --------------------------------------------------------------------- SPACING — 4px-Basis, fluide Sektionsabstände --------------------------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; --s-12: 8rem; --space-section: clamp(5rem, 3rem + 9vw, 11rem); /* vertikaler Sektionsrhythmus */ --space-gutter: clamp(1.25rem, 0.6rem + 3.2vw, 4rem); /* seitlicher Rand */ /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --w-content: 68rem; /* Standard-Inhaltsbreite */ --w-wide: 88rem; /* breite Sektionen / volle Bänder */ --w-prose: 38rem; /* optimale Lesebreite Fließtext */ --rail-w: clamp(0px, calc((100vw - var(--w-wide)) / 2), 5.5rem); --header-h: 4.5rem; /* --------------------------------------------------------------------- RADIEN & RAHMEN — bewusst klein. Keine großen abgerundeten Karten. --------------------------------------------------------------------- */ --r-none: 0px; --r-xs: 2px; --r-sm: 3px; --r-md: 6px; --r-pill: 999px; --b-hair: 1px solid var(--c-line); --b-soft: 1px solid var(--c-line-strong); /* --------------------------------------------------------------------- SCHATTEN & LICHT — auf Dunkel arbeitet Licht besser als Schatten. --------------------------------------------------------------------- */ --sh-panel: 0 1px 0 0 rgb(255 255 255 / 0.04) inset, 0 24px 60px -32px rgb(0 0 0 / 0.9); --sh-lift: 0 32px 80px -40px rgb(0 0 0 / 0.95); --glow-accent: 0 0 0 1px var(--c-line-accent), 0 0 32px -6px rgb(61 123 250 / 0.5); --glow-soft: 0 0 48px -12px rgb(61 123 250 / 0.35); /* --------------------------------------------------------------------- MOTION --------------------------------------------------------------------- */ --d-instant: 90ms; --d-fast: 180ms; --d-base: 320ms; --d-slow: 620ms; --d-reveal: 900ms; --d-cinema: 1400ms; --e-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out, Standard */ --e-in-out: cubic-bezier(0.65, 0, 0.35, 1); --e-soft: cubic-bezier(0.33, 1, 0.68, 1); --e-linear: linear; /* Staffelungsstufen für Reveals. Als Skala statt freier Werte, damit die Rhythmik über die ganze Seite gleich bleibt — und damit im Markup kein style-Attribut nötig ist (siehe [data-delay] in base.css). */ --delay-1: 60ms; --delay-2: 90ms; --delay-3: 130ms; --delay-4: 170ms; --delay-5: 230ms; --delay-6: 320ms; --delay-7: 420ms; --delay-8: 540ms; /* --------------------------------------------------------------------- Z-INDEX — geschlossenes System, keine willkürlichen Werte --------------------------------------------------------------------- */ --z-canvas: 0; --z-scrim: 1; --z-content: 2; --z-rail: 20; --z-menu: 30; /* Der Header liegt bewusst ÜBER dem Fullscreen-Menü: Marke und Schließen-Schalter müssen sichtbar und bedienbar bleiben, solange das Menü offen ist. */ --z-header: 40; --z-overlay: 50; --z-skiplink: 60; /* Runtime-Variablen (von JS gesetzt) — hier mit sicheren Defaults */ --scroll-progress: 0; --pointer-x: 50%; --pointer-y: 40%; } /* Reduced Motion: Zeiten global neutralisieren. Inhalte bleiben vollständig sichtbar — Reveal-Zustände werden in base.css auf ihren Endzustand gesetzt. */ @media (prefers-reduced-motion: reduce) { :root { --d-instant: 1ms; --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-reveal: 1ms; --d-cinema: 1ms; } } /* Höherer Kontrast, falls vom System gefordert */ @media (prefers-contrast: more) { :root { --c-text-muted: #c3ccd8; --c-text-faint: #9aa5b2; --c-line: rgb(148 163 184 / 0.32); --c-line-strong: rgb(148 163 184 / 0.5); } }