/* ========================================================================== Design Tokens Automatisch erzeugt aus lab/_data/paletten.js und lab/_data/logos.js. Nicht von Hand bearbeiten, die Werte stehen in den Datendateien. Paletten: [data-palette="a|b|c"] setzt alle Farbrollen. Das Attribut steht auf (Auswahl im Konfigurator) und lokal auf den Palettenkarten, die alle drei nebeneinander zeigen. Logos: [data-logo="1..4"] setzt die Farben der vier Logoteile fuer hellen (-h) und dunklen (-d) Grund. Die Regel wiederholt sich an jedem Element mit eigener Palette, damit Werte wie var(--accent) dort neu aufgeloest werden und nicht die Palette von mitschleppen. ========================================================================== */ [data-palette="a"] { --primary: #1E513C; --primary-dark: #123A2B; --primary-light: #6C9C83; --primary-tint: #E2EBE4; --secondary: #2C3431; --accent: #A76F25; --accent-light: #CFA066; --bg: #F5F3EE; --bg-alt: #EAE6DC; --surface: #FBFAF7; --surface-elevated: #FFFFFF; --inverse: #10231B; --text: #17201C; --text-2: #515C56; --text-inverse: #EEF0EA; --border: #D8D3C7; --muted: #8A918C; --success: #2E7D4F; --verlauf: linear-gradient(180deg, #F5F3EE 0%, #E2EBE4 100%); } [data-palette="b"] { --primary: #262D2B; --primary-dark: #171C1B; --primary-light: #86908B; --primary-tint: #E6E2DA; --secondary: #2F5446; --accent: #A8633A; --accent-light: #D9A07A; --bg: #F6F2EB; --bg-alt: #ECE4D7; --surface: #FBF8F3; --surface-elevated: #FFFFFF; --inverse: #1B201F; --text: #1C2120; --text-2: #595A55; --text-inverse: #F2EDE4; --border: #DDD3C3; --muted: #9A9083; --success: #4A7C5C; --verlauf: linear-gradient(180deg, #F6F2EB 0%, #ECE4D7 100%); } [data-palette="c"] { --primary: #0F4C58; --primary-dark: #0A333C; --primary-light: #6AA3AC; --primary-tint: #DCE9EA; --secondary: #5F5A52; --accent: #C9832A; --accent-light: #EDB566; --bg: #F3F3EF; --bg-alt: #E4E7E2; --surface: #FAFAF7; --surface-elevated: #FFFFFF; --inverse: #0B2126; --text: #13232A; --text-2: #4D5C62; --text-inverse: #EAF0EF; --border: #D2D8D6; --muted: #87949A; --success: #2B8466; --verlauf: linear-gradient(180deg, #F3F3EF 0%, #DCE9EA 100%); } [data-logo="1"], [data-logo="1"] [data-palette] { --lg-sym-h: #A76F25; --lg-grid-h: #A76F25; --lg-flex-h: #1E513C; --lg-sub-h: #1E513C; --lg-sym-d: #C99554; --lg-grid-d: #C99554; --lg-flex-d: #EEF0EA; --lg-sub-d: #B9C6BE; --lg-mono: #1E513C; } [data-logo="2"], [data-logo="2"] [data-palette] { --lg-sym-h: #A8633A; --lg-grid-h: #A8633A; --lg-flex-h: #262D2B; --lg-sub-h: #262D2B; --lg-sym-d: #D59A72; --lg-grid-d: #D59A72; --lg-flex-d: #F2EDE4; --lg-sub-d: #CFC5B6; --lg-mono: #A8633A; } [data-logo="3"], [data-logo="3"] [data-palette] { --lg-sym-h: var(--accent); --lg-grid-h: var(--text); --lg-flex-h: var(--text); --lg-sub-h: var(--text-2); --lg-sym-d: var(--accent-light); --lg-grid-d: var(--text-inverse); --lg-flex-d: var(--text-inverse); --lg-sub-d: var(--text-inverse); --lg-mono: var(--accent); } [data-logo="4"], [data-logo="4"] [data-palette] { --lg-sym-h: var(--primary); --lg-grid-h: var(--primary); --lg-flex-h: var(--primary); --lg-sub-h: var(--primary); --lg-sym-d: var(--text-inverse); --lg-grid-d: var(--text-inverse); --lg-flex-d: var(--text-inverse); --lg-sub-d: var(--text-inverse); --lg-mono: var(--text); } [data-logo="5"], [data-logo="5"] [data-palette] { --lg-sym-h: #A8633A; --lg-grid-h: #A8633A; --lg-flex-h: #1E513C; --lg-sub-h: #1E513C; --lg-sym-d: #D08F65; --lg-grid-d: #D08F65; --lg-flex-d: #6FA98B; --lg-sub-d: #9CBCAA; --lg-mono: #A8633A; } [data-logo="6"], [data-logo="6"] [data-palette] { --lg-sym-h: #2C3431; --lg-grid-h: #2C3431; --lg-flex-h: #1E513C; --lg-sub-h: #1E513C; --lg-sym-d: #C3C8C4; --lg-grid-d: #C3C8C4; --lg-flex-d: #6FA98B; --lg-sub-d: #9CBCAA; --lg-mono: #2C3431; } [data-logo="7"], [data-logo="7"] [data-palette] { --lg-sym-h: #BFA06A; --lg-grid-h: #BFA06A; --lg-flex-h: #1E513C; --lg-sub-h: #1E513C; --lg-sym-d: #DCC393; --lg-grid-d: #DCC393; --lg-flex-d: #6FA98B; --lg-sub-d: #9CBCAA; --lg-mono: #BFA06A; } [data-logo="8"], [data-logo="8"] [data-palette] { --lg-sym-h: #77848B; --lg-grid-h: #77848B; --lg-flex-h: #1E513C; --lg-sub-h: #1E513C; --lg-sym-d: #AEBAC0; --lg-grid-d: #AEBAC0; --lg-flex-d: #6FA98B; --lg-sub-d: #9CBCAA; --lg-mono: #77848B; }