/* ========================================================================== ILLUMOR DESIGN SYSTEM — tokens.css -------------------------------------------------------------------------- Drei Ebenen: Primitives → Funktional → Semantisch. Flach benannt, damit ein Tailwind-Preset oder DTCG-JSON-Export trivial ist. THEMING Dark liegt auf dem nackten :root (Dark first). Light unter [data-theme="light"] auf . Nur Tokens wechseln — niemals Klassennamen, Markup oder Assets. ========================================================================== */ :root { /* ---- PRIMITIVES · Neutral-Rampe --------------------------------------- */ --c-black: #050505; --c-900: #0a0a0b; --c-850: #101012; --c-800: #16161a; --c-700: #1f1f24; --c-600: #2c2c33; --c-500: #4a4a55; --c-400: #6e6e7a; /* Zwei Zwischenstufen allein für die tertiäre Schrift: #6e6e7a erreicht auf keiner der beiden Flächen die 4,5:1 aus WCAG AA. */ --c-450: #5f5f6b; /* tertiär auf Hell — 5,4:1 */ --c-350: #7e7e8c; /* tertiär auf Dunkel — 4,7:1 */ --c-300: #9a9aa6; --c-200: #c9c9d1; --c-100: #e6e6ea; --c-090: #e8e8ec; --c-070: #eeeef1; --c-050: #f2f2f4; --c-030: #f5f5f7; --c-white: #ffffff; /* ---- PRIMITIVES · Licht-Tints ----------------------------------------- */ /* Als RGB-Triplett notiert, damit rgb(var(--x) / alpha) möglich ist. Reines #FFF glüht steril — der kühle Stich macht Licht glaubwürdig. */ --c-glow-tint: 240 246 255; /* kaum merklich kühles Weiß (Dark-Halo) */ --c-shade-tint: 11 13 18; /* kühles Schwarz (Light-Relief) */ /* ---- FUNKTIONALE FARBEN ----------------------------------------------- */ /* Ausschließlich Formular-Validierung und KPI-Deltas. Nie dekorativ. Bedeutung wird immer zusätzlich über Icon/Text getragen, nie über Farbe allein. */ --c-success: #3be08a; --c-danger: #ff5a5a; --c-warn: #ffc44d; /* ---- RADIUS ----------------------------------------------------------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; /* Karten-Default */ --r-xl: 32px; --r-2xl: 40px; --r-pill: 999px; /* Buttons-Default */ /* ---- SPACING · 4px-Basis ---------------------------------------------- */ --sp-0: 0; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ --sp-20: 5rem; /* 80 */ --sp-24: 6rem; /* 96 */ --sp-32: 8rem; /* 128 */ /* ---- LAYOUT ----------------------------------------------------------- */ --w-prose: 44rem; /* 704px — Lesebreite */ --w-content: 75rem; /* 1200px — Standard-Container */ --w-wide: 90rem; /* 1440px — randnahe Sektionen */ --gutter: clamp(1rem, 4vw, 2.5rem); --section-y: clamp(4rem, 10vw, 9rem); /* ---- TYPOGRAFIE ------------------------------------------------------- */ --f-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif; --f-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --t-display-xl: clamp(2.75rem, 8vw, 6.5rem); --t-display-lg: clamp(2.25rem, 5.5vw, 4rem); --t-h1: clamp(2rem, 4.5vw, 3.25rem); --t-h2: clamp(1.625rem, 3.5vw, 2.5rem); --t-h3: clamp(1.25rem, 2.2vw, 1.75rem); --t-h4: 1.125rem; --t-body-lg: 1.125rem; --t-body: 1rem; --t-body-sm: 0.875rem; --t-caption: 0.75rem; --t-overline: 0.75rem; --t-kpi: clamp(2.5rem, 6vw, 4.5rem); --lh-tight: 0.95; --lh-snug: 1.15; --lh-normal: 1.45; --lh-relaxed: 1.7; --ls-display: -0.03em; --ls-heading: -0.015em; --ls-body: 0; --ls-overline: 0.18em; --ls-wordmark: 0.08em; --ls-display-caps: 0.005em; /* Versalien brauchen Luft, kein negatives Tracking */ --lh-caps: 1.02; /* ---- MOTION ----------------------------------------------------------- */ --d-fast: 140ms; --d-base: 240ms; --d-slow: 420ms; --d-ignite: 1100ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ---- Z-INDEX ---------------------------------------------------------- */ --z-deco: 0; --z-content: 1; --z-sticky: 50; --z-header: 100; --z-drawer: 200; --z-toast: 300; } /* Scoped Themes: .theme-dark / .theme-light setzen die Token-Ebene auf einem beliebigen Container statt auf . Damit lassen sich beide Themes nebeneinander zeigen (Styleguide) oder eine einzelne Sektion invertieren. Custom Properties erben — der nächstgelegene deklarierende Vorfahre gewinnt, Verschachtelung funktioniert in beide Richtungen. */ /* ========================================================================== THEME · DARK (Default) ========================================================================== */ :root, .theme-dark { color-scheme: dark; /* Flächen */ --surface-base: var(--c-900); --surface-base-rgb: 10 10 11; --surface-raised: var(--c-850); --surface-raised-2: var(--c-800); --surface-sunken: var(--c-black); --surface-overlay: rgb(10 10 11 / 0.72); --surface-scrim: rgb(5 5 5 / 0.78); /* Schrift */ --ink-primary: var(--c-white); --ink-secondary: var(--c-300); --ink-tertiary: var(--c-350); --ink-inverse: var(--c-900); /* Kanten */ --edge-subtle: rgb(255 255 255 / 0.09); --edge-strong: rgb(255 255 255 / 0.22); /* Röhre */ --tube-core: var(--c-white); --tube-sheen: rgb(255 255 255 / 0.10); /* CTA */ --cta-fill: var(--c-white); --cta-fill-hover: var(--c-050); --cta-ink: var(--c-900); /* -- Tube-Effekt · Text (text-shadow) -------------------------------- */ --tube-text-sm: 0 0 1px rgb(var(--c-glow-tint) / 0.90), 0 0 6px rgb(var(--c-glow-tint) / 0.42), 0 0 14px rgb(var(--c-glow-tint) / 0.18); --tube-text-md: 0 0 1px rgb(var(--c-glow-tint) / 0.95), 0 0 4px rgb(var(--c-glow-tint) / 0.70), 0 0 14px rgb(var(--c-glow-tint) / 0.38), 0 0 32px rgb(var(--c-glow-tint) / 0.18); --tube-text-lg: 0 0 2px rgb(var(--c-glow-tint) / 1), 0 0 8px rgb(var(--c-glow-tint) / 0.78), 0 0 22px rgb(var(--c-glow-tint) / 0.48), 0 0 56px rgb(var(--c-glow-tint) / 0.26); /* -- Tube-Effekt · Kante (box-shadow) -------------------------------- */ --tube-edge-sm: 0 0 0 1px rgb(var(--c-glow-tint) / 0.42), 0 0 8px rgb(var(--c-glow-tint) / 0.18); --tube-edge-md: 0 0 0 1px rgb(var(--c-glow-tint) / 0.55), 0 0 14px rgb(var(--c-glow-tint) / 0.26), inset 0 0 12px rgb(var(--c-glow-tint) / 0.08); --tube-edge-lg: 0 0 0 1.5px rgb(var(--c-glow-tint) / 0.75), 0 0 26px rgb(var(--c-glow-tint) / 0.40), inset 0 0 18px rgb(var(--c-glow-tint) / 0.12); /* -- Tube-Effekt · Linie (filter, für SVG-Strokes) ------------------- */ --tube-stroke-sm: drop-shadow(0 0 1px rgb(var(--c-glow-tint) / 0.85)) drop-shadow(0 0 5px rgb(var(--c-glow-tint) / 0.40)); --tube-stroke-md: drop-shadow(0 0 2px rgb(var(--c-glow-tint) / 0.90)) drop-shadow(0 0 8px rgb(var(--c-glow-tint) / 0.50)) drop-shadow(0 0 22px rgb(var(--c-glow-tint) / 0.26)); --tube-stroke-lg: drop-shadow(0 0 2px rgb(var(--c-glow-tint) / 1)) drop-shadow(0 0 12px rgb(var(--c-glow-tint) / 0.65)) drop-shadow(0 0 36px rgb(var(--c-glow-tint) / 0.34)); /* -- Elevation · Tiefe plus Innenkante ------------------------------- */ --e-1: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 2px 8px rgb(0 0 0 / 0.50); --e-2: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 8px 20px rgb(0 0 0 / 0.55); --e-3: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 18px 40px rgb(0 0 0 / 0.60); --e-4: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 32px 70px rgb(0 0 0 / 0.70); --e-inset: inset 0 2px 10px rgb(0 0 0 / 0.60), inset 0 -1px 0 rgb(255 255 255 / 0.04); } /* ========================================================================== THEME · LIGHT -------------------------------------------------------------------------- "Schwarze Neonröhre" ist physikalisch kein Glühen, sondern ein RELIEF. Derselbe Token-Slot löst hier zu Letterpress und neumorphem Doppelschatten auf: Licht von oben links, Schatten nach unten rechts. ========================================================================== */ [data-theme="light"], .theme-light { color-scheme: light; --surface-base: var(--c-070); --surface-base-rgb: 238 238 241; --surface-raised: var(--c-030); --surface-raised-2: var(--c-white); --surface-sunken: var(--c-090); --surface-overlay: rgb(238 238 241 / 0.78); --surface-scrim: rgb(238 238 241 / 0.82); --ink-primary: var(--c-900); --ink-secondary: var(--c-500); --ink-tertiary: var(--c-450); --ink-inverse: var(--c-white); --edge-subtle: rgb(var(--c-shade-tint) / 0.10); --edge-strong: rgb(var(--c-shade-tint) / 0.30); --tube-core: var(--c-900); --tube-sheen: rgb(255 255 255 / 0.95); --cta-fill: var(--c-900); --cta-fill-hover: var(--c-700); --cta-ink: var(--c-white); /* -- Tube-Effekt · Text → Letterpress -------------------------------- */ --tube-text-sm: 0 1px 0 rgb(255 255 255 / 0.90), 0 1px 2px rgb(var(--c-shade-tint) / 0.18); --tube-text-md: 0 1px 0 rgb(255 255 255 / 0.95), 0 2px 4px rgb(var(--c-shade-tint) / 0.22), 0 6px 14px rgb(var(--c-shade-tint) / 0.13); --tube-text-lg: 0 1px 0 rgb(255 255 255 / 1), 0 3px 6px rgb(var(--c-shade-tint) / 0.26), 0 10px 26px rgb(var(--c-shade-tint) / 0.16), 0 22px 48px rgb(var(--c-shade-tint) / 0.08); /* -- Tube-Effekt · Kante → harte Linie plus Relief ------------------- */ --tube-edge-sm: 0 0 0 1px rgb(var(--c-shade-tint) / 0.75), 2px 2px 6px rgb(var(--c-shade-tint) / 0.08), -2px -2px 6px rgb(255 255 255 / 0.80); --tube-edge-md: 0 0 0 1.5px rgb(var(--c-shade-tint) / 0.88), 4px 4px 12px rgb(var(--c-shade-tint) / 0.10), -4px -4px 12px rgb(255 255 255 / 0.90); --tube-edge-lg: 0 0 0 2px rgb(var(--c-shade-tint) / 1), 7px 7px 20px rgb(var(--c-shade-tint) / 0.13), -7px -7px 20px rgb(255 255 255 / 0.95); /* -- Tube-Effekt · Linie → plastische Röhre -------------------------- */ --tube-stroke-sm: drop-shadow(0 1px 0 rgb(255 255 255 / 0.85)) drop-shadow(0 1px 3px rgb(var(--c-shade-tint) / 0.20)); --tube-stroke-md: drop-shadow(0 1px 0 rgb(255 255 255 / 0.90)) drop-shadow(0 2px 5px rgb(var(--c-shade-tint) / 0.24)) drop-shadow(0 8px 18px rgb(var(--c-shade-tint) / 0.13)); --tube-stroke-lg: drop-shadow(0 1px 0 rgb(255 255 255 / 1)) drop-shadow(0 3px 7px rgb(var(--c-shade-tint) / 0.28)) drop-shadow(0 14px 30px rgb(var(--c-shade-tint) / 0.16)); /* -- Elevation · neumorpher Doppelschatten --------------------------- */ --e-1: 3px 3px 8px rgb(var(--c-shade-tint) / 0.07), -3px -3px 8px rgb(255 255 255 / 0.85); --e-2: 6px 6px 16px rgb(var(--c-shade-tint) / 0.10), -6px -6px 16px rgb(255 255 255 / 0.90); --e-3: 10px 10px 28px rgb(var(--c-shade-tint) / 0.12), -10px -10px 28px rgb(255 255 255 / 0.95); --e-4: 16px 16px 44px rgb(var(--c-shade-tint) / 0.14), -16px -16px 44px rgb(255 255 255 / 1); --e-inset: inset 4px 4px 10px rgb(var(--c-shade-tint) / 0.09), inset -4px -4px 10px rgb(255 255 255 / 0.90); }