/* ========================================================================= BRIAN SCHNEIDT INTERACTIVE — V3 · Design Tokens ------------------------------------------------------------------------ Einzige Quelle der Wahrheit für Farbe, Typografie, Raum, Radius, Tiefe. Keine Komponente definiert eine eigene Farbe oder einen eigenen Abstand. Themen: Hell- und Dunkelwert stehen zusammen in light-dark(). Dadurch existiert jeder Dunkelwert genau einmal statt wie bisher dreifach. Der Block darüber ist die Rückfallebene für Browser ohne light-dark() (vor Chrome 123 / Safari 17.5 / Firefox 120) — sie sehen die Hellversion. ========================================================================= */ :root { /* ----------------------------------------------------------------------- 1 · PALETTE — Rohwerte. Nie direkt in Komponenten verwenden. --------------------------------------------------------------------- */ /* Signal Violet — Markenfarbe aus dem Logo (500 = #6550E8) */ --v-50: #F3F1FE; --v-100: #E7E3FD; --v-200: #CFC8FB; --v-300: #B0A4F7; --v-400: #8C7AF1; --v-500: #6550E8; --v-600: #5340CB; --v-700: #4433A4; --v-800: #332781; --v-900: #241B59; /* Neutrals — leicht violettstichig, damit sie zur Palette gehören */ --n-0: #FFFFFF; --n-25: #FBFAFD; --n-50: #F6F5F9; --n-100: #EFEDF4; --n-200: #E2DFEA; --n-300: #C8C4D4; --n-400: #9C97AC; --n-500: #6E6980; --n-600: #514D60; --n-700: #35323F; --n-800: #1E1B26; --n-900: #131118; --n-950: #0B0A0E; /* ----------------------------------------------------------------------- 2 · SEMANTIK — Rückfallebene (hell). Komponenten sprechen nur diese Namen. --------------------------------------------------------------------- */ --bg: var(--n-0); --bg-subtle: var(--n-25); --bg-sunken: var(--n-50); --bg-tint: var(--v-50); --bg-elevated: var(--n-0); --bg-glass: rgba(255, 255, 255, .82); --bg-accent-soft: rgba(101, 80, 232, .055); --bg-inverse: var(--n-900); --text-primary: var(--n-800); --text-secondary: var(--n-600); --text-tertiary: var(--n-500); --text-inverse: var(--n-0); --text-on-accent: var(--n-0); --border-subtle: rgba(30, 27, 38, .09); --border-default: rgba(30, 27, 38, .15); --border-strong: rgba(30, 27, 38, .28); --accent: var(--v-500); --accent-hover: var(--v-600); --accent-active: var(--v-700); --accent-solid: var(--v-500); /* Flächen, die immer Weiß tragen */ --accent-soft: var(--v-50); --accent-quiet: var(--v-100); --accent-line: rgba(101, 80, 232, .32); --focus-ring: var(--v-600); --focus-halo: rgba(101, 80, 232, .22); --success: #0E7A50; --success-soft: #E7F5EE; --danger: #B3261E; --danger-soft: #FDECEA; /* Tiefe: nur die Schattenfarben wechseln das Thema, die Geometrie nie. light-dark() nimmt ausschließlich Farben — deshalb diese Trennung. */ --shade-1: rgba(24, 18, 48, .06); --shade-2: rgba(24, 18, 48, .05); --shade-3: rgba(24, 18, 48, .09); --shade-accent-1: rgba(51, 39, 129, .16); --shade-accent-2: rgba(51, 39, 129, .20); --shadow-xs: 0 1px 2px var(--shade-1); --shadow-sm: 0 1px 2px var(--shade-1), 0 2px 8px var(--shade-2); --shadow-md: 0 2px 6px var(--shade-1), 0 12px 28px var(--shade-3); --shadow-lg: 0 4px 12px var(--shade-2), 0 28px 64px var(--shade-3); --shadow-accent: 0 2px 6px var(--shade-accent-1), 0 12px 30px var(--shade-accent-2); /* Signet-Fläche im Hero und auf der Studio-Karte */ --canvas-bg: var(--v-500); --canvas-fg: #FFFFFF; --canvas-quiet: rgba(255, 255, 255, .88); --canvas-line: rgba(255, 255, 255, .16); /* ----------------------------------------------------------------------- 3 · TYPOGRAFIE --------------------------------------------------------------------- Bewusst keine Webfonts: keine externe Anfrage an einen CDN (DSGVO, LG München 3 O 17493/20), kein FOUT, kein Layout-Shift. Die Kaskade löst auf Apple-Geräten San Francisco auf, auf Windows Segoe UI Variable, auf Android/Linux Roboto bzw. Inter, falls installiert. --------------------------------------------------------------------- */ --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "Inter Tight", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; /* Fließende Skala — Wachstum nur zwischen 360px und 1440px */ --step-display: clamp(2.75rem, 1.30rem + 6.4vw, 5.25rem); /* 44 → 84 */ --step-display-l: clamp(2.25rem, 1.45rem + 3.6vw, 3.75rem); /* 36 → 60 */ --step-h2: clamp(1.875rem, 1.36rem + 2.3vw, 3rem); /* 30 → 48 */ --step-h3: clamp(1.375rem, 1.19rem + .82vw, 1.875rem); /* 22 → 30 */ --step-h4: clamp(1.125rem, 1.07rem + .25vw, 1.3125rem);/* 18 → 21 */ --step-lede: clamp(1.0625rem, 1.00rem + .30vw, 1.25rem); /* 17 → 20 */ --step-body: 1.0625rem; /* 17 */ --step-sm: 0.9375rem; /* 15 */ --step-xs: 0.8125rem; /* 13 */ --step-2xs: 0.75rem; /* 12 — Minimum */ --tracking-display: -.032em; --tracking-tight: -.021em; --tracking-normal: -.011em; --tracking-wide: .085em; --leading-display: 1.05; --leading-tight: 1.18; --leading-normal: 1.62; --measure: 66ch; --measure-tight: 44ch; /* ----------------------------------------------------------------------- 4 · RAUM — striktes 8px-Grid, großzügig gesetzt --------------------------------------------------------------------- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6.5rem; --space-12: 8rem; --section-y: clamp(4.5rem, 2.9rem + 6.4vw, 9rem); /* 72 → 144 */ --section-y-sm: clamp(3.25rem, 2.3rem + 3.8vw, 6rem); /* 52 → 96 */ --gutter: clamp(1.25rem, .55rem + 3.1vw, 3.5rem); --wrap: min(100% - var(--gutter) * 2, 76rem); --wrap-wide: min(100% - var(--gutter) * 2, 88rem); --wrap-narrow: min(100% - var(--gutter) * 2, 46rem); /* ----------------------------------------------------------------------- 5 · RADIEN, MOTION, EBENEN --------------------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --ease: cubic-bezier(.2, .8, .25, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: 130ms; --dur-ui: 200ms; --dur-slow: 420ms; --dur-reveal: 560ms; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --nav-h: 60px; --tap: 44px; /* Mindestgröße jeder Trefferfläche */ } @media (min-width: 1024px) { :root { --nav-h: 72px; } } /* ========================================================================= THEMEN — jeder Dunkelwert steht genau einmal, direkt neben seinem Hellwert. `color-scheme` steuert außerdem Formularfelder, Scrollbars und Caret. ========================================================================= */ @supports (color: light-dark(#fff, #000)) { :root { color-scheme: light dark; --bg: light-dark(var(--n-0), var(--n-900)); --bg-subtle: light-dark(var(--n-25), #17141D); --bg-sunken: light-dark(var(--n-50), var(--n-950)); --bg-tint: light-dark(var(--v-50), #1A1526); --bg-elevated: light-dark(var(--n-0), #1C1926); --bg-glass: light-dark(rgba(255,255,255,.82), rgba(19,17,24,.86)); --bg-accent-soft: light-dark(rgba(101,80,232,.055), rgba(176,164,247,.10)); --bg-inverse: light-dark(var(--n-900), var(--n-0)); --text-primary: light-dark(var(--n-800), #F6F5FA); --text-secondary: light-dark(var(--n-600), #B9B4C7); --text-tertiary: light-dark(var(--n-500), #9A94AA); --text-inverse: light-dark(var(--n-0), var(--n-900)); --text-on-accent: #FFFFFF; --border-subtle: light-dark(rgba(30,27,38,.09), rgba(214,208,236,.11)); --border-default: light-dark(rgba(30,27,38,.15), rgba(214,208,236,.18)); --border-strong: light-dark(rgba(30,27,38,.28), rgba(214,208,236,.34)); --accent: light-dark(var(--v-500), var(--v-300)); --accent-hover: light-dark(var(--v-600), var(--v-200)); --accent-active: light-dark(var(--v-700), var(--v-100)); --accent-solid: light-dark(var(--v-500), var(--v-500)); --accent-soft: light-dark(var(--v-50), rgba(101,80,232,.20)); --accent-quiet: light-dark(var(--v-100), rgba(101,80,232,.30)); --accent-line: light-dark(rgba(101,80,232,.32), rgba(176,164,247,.38)); --focus-ring: light-dark(var(--v-600), var(--v-200)); --focus-halo: light-dark(rgba(101,80,232,.22), rgba(176,164,247,.30)); --success: light-dark(#0E7A50, #57D8A4); --success-soft: light-dark(#E7F5EE, rgba(87,216,164,.13)); --danger: light-dark(#B3261E, #FF938A); --danger-soft: light-dark(#FDECEA, rgba(255,147,138,.13)); --shade-1: light-dark(rgba(24,18,48,.06), rgba(0,0,0,.52)); --shade-2: light-dark(rgba(24,18,48,.05), rgba(0,0,0,.40)); --shade-3: light-dark(rgba(24,18,48,.09), rgba(0,0,0,.48)); --shade-accent-1: light-dark(rgba(51,39,129,.16), rgba(0,0,0,.55)); --shade-accent-2: light-dark(rgba(51,39,129,.20), rgba(51,39,129,.45)); --canvas-bg: light-dark(var(--v-500), var(--v-600)); --canvas-fg: #FFFFFF; --canvas-quiet: rgba(255, 255, 255, .88); --canvas-line: rgba(255, 255, 255, .16); } /* Manuelle Auswahl gewinnt in beide Richtungen */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } }