/* ========================================================= LIVERY — Farbsystem (OKLCH, 3-Tier: Primitive → Semantic → Component) Anker (unverändert vom Kunden): --blue-800 #1717a9 Marken-Ultramarin --yellow-400 #d1b813 Signal-Gelb --red-600 #df1d26 Spark-Rot Light/Dark: light-dark() + color-scheme (Baseline, kein JS nötig) ========================================================= */ /* ---------- 1) PRIMITIVES (rohe Werte, nie direkt in Komponenten) ---------- */ :root { /* Blau – Primary */ --blue-50: oklch(0.975 0.011 264.5); --blue-100: oklch(0.95 0.024 270.3); --blue-200: oklch(0.901 0.048 267.2); --blue-300: oklch(0.839 0.078 268.6); --blue-400: oklch(0.781 0.111 267.9); --blue-500: oklch(0.681 0.166 268.1); --blue-600: oklch(0.578 0.214 268.3); --blue-700: oklch(0.459 0.215 268.1); --blue-800: oklch(0.355 0.215 268.2); /* ★ Kunden-Anker #1717a9 */ --blue-900: oklch(0.27 0.178 268.2); --blue-950: oklch(0.191 0.127 268.5); /* Gelb – Secondary */ --yellow-50: oklch(0.975 0.019 96.9); --yellow-100: oklch(0.951 0.038 100.6); --yellow-200: oklch(0.901 0.077 99.6); --yellow-300: oklch(0.84 0.124 99.4); --yellow-400: oklch(0.78 0.159 99.1); /* ★ Kunden-Anker #d1b813 */ --yellow-500: oklch(0.681 0.141 99.4); --yellow-600: oklch(0.578 0.118 99.3); --yellow-700: oklch(0.459 0.094 99.1); --yellow-800: oklch(0.355 0.072 99.5); --yellow-900: oklch(0.268 0.056 98.7); --yellow-950: oklch(0.19 0.04 100.1); /* Rot – Accent */ --red-50: oklch(0.975 0.012 29.9); --red-100: oklch(0.951 0.024 26.9); --red-200: oklch(0.9 0.05 27.2); --red-300: oklch(0.839 0.086 26.1); --red-400: oklch(0.779 0.127 26.2); --red-500: oklch(0.68 0.206 26.5); --red-600: oklch(0.578 0.222 26.4); /* ★ Kunden-Anker #df1d26 */ --red-700: oklch(0.459 0.186 26.4); --red-800: oklch(0.354 0.143 26.4); --red-900: oklch(0.27 0.108 26.2); --red-950: oklch(0.189 0.077 27.3); /* Asphalt – Neutral (blau getönt) */ --neutral-50: oklch(0.975 0.005 258.3); --neutral-100: oklch(0.95 0.007 277.2); --neutral-200: oklch(0.9 0.01 267.4); --neutral-300: oklch(0.839 0.015 268.5); --neutral-400: oklch(0.779 0.018 267.8); --neutral-500: oklch(0.656 0.022 267.2); --neutral-600: oklch(0.549 0.026 269.2); --neutral-700: oklch(0.46 0.028 266.6); --neutral-800: oklch(0.354 0.031 269.6); --neutral-900: oklch(0.27 0.029 267.5); --neutral-925: oklch(0.229 0.03 269.8); --neutral-950: oklch(0.189 0.028 267.6); --neutral-975: oklch(0.141 0.026 264.8); /* Success */ --success-50: oklch(0.974 0.017 151.1); --success-100: oklch(0.951 0.034 152.1); --success-200: oklch(0.9 0.069 151.9); --success-300: oklch(0.841 0.111 152.0); --success-400: oklch(0.779 0.144 151.8); --success-500: oklch(0.681 0.162 152.0); --success-600: oklch(0.578 0.152 151.9); --success-700: oklch(0.46 0.12 152.0); --success-800: oklch(0.356 0.092 152.0); --success-900: oklch(0.271 0.071 152.1); --success-950: oklch(0.191 0.05 152.0); /* Warning (bewusst orange, ≠ Marken-Gelb) */ --warning-50: oklch(0.976 0.015 61.3); --warning-100: oklch(0.949 0.032 61.4); --warning-200: oklch(0.9 0.066 61.6); --warning-300: oklch(0.84 0.111 61.5); --warning-400: oklch(0.779 0.144 62.0); --warning-500: oklch(0.679 0.155 62.0); --warning-600: oklch(0.579 0.132 62.2); --warning-700: oklch(0.46 0.106 62.0); --warning-800: oklch(0.354 0.081 61.2); --warning-900: oklch(0.269 0.062 62.2); --warning-950: oklch(0.191 0.043 64.1); /* Info (Cyan, ≠ Marken-Blau) */ --info-50: oklch(0.976 0.014 231.2); --info-100: oklch(0.949 0.027 232.7); --info-200: oklch(0.899 0.056 232.6); --info-300: oklch(0.841 0.091 231.7); --info-400: oklch(0.779 0.119 232.2); --info-500: oklch(0.679 0.133 232.4); --info-600: oklch(0.577 0.116 232.3); --info-700: oklch(0.46 0.092 231.9); --info-800: oklch(0.356 0.072 231.9); --info-900: oklch(0.271 0.054 230.4); --info-950: oklch(0.188 0.039 233.4); /* Danger (Crimson, ≠ Marken-Rot) */ --danger-50: oklch(0.975 0.012 23.7); --danger-100: oklch(0.951 0.023 20.9); --danger-200: oklch(0.901 0.05 21.2); --danger-300: oklch(0.839 0.087 19.9); --danger-400: oklch(0.78 0.127 20.3); --danger-500: oklch(0.68 0.209 20.0); --danger-600: oklch(0.578 0.22 20.0); --danger-700: oklch(0.459 0.184 19.9); --danger-800: oklch(0.354 0.141 19.9); --danger-900: oklch(0.269 0.107 19.6); --danger-950: oklch(0.19 0.077 20.2); --white: oklch(1 0 0); } /* ---------- 2) SEMANTIC (Rollen – nur diese in Komponenten verwenden) ---------- */ :root { color-scheme: light dark; /* folgt dem System */ /* Flächen */ --bg: light-dark(var(--neutral-50), var(--neutral-950)); --surface: light-dark(var(--white), var(--neutral-925)); --surface-raised: light-dark(var(--white), var(--neutral-900)); --surface-sunken: light-dark(var(--neutral-100), var(--neutral-975)); --border: light-dark(var(--neutral-200), var(--neutral-800)); --border-strong: light-dark(var(--neutral-500), var(--neutral-600)); /* Inputs: ≥ 3:1 */ /* Text */ --text: light-dark(var(--neutral-950), var(--neutral-100)); --text-muted: light-dark(var(--neutral-700), var(--neutral-400)); --text-subtle: light-dark(var(--neutral-600), var(--neutral-500)); /* Placeholder */ --text-inverse: light-dark(var(--white), var(--neutral-975)); --link: light-dark(var(--blue-800), var(--blue-300)); /* Primary — Blau */ --primary: light-dark(var(--blue-800), var(--blue-400)); --primary-hover: light-dark(var(--blue-900), var(--blue-300)); --on-primary: light-dark(var(--white), var(--neutral-975)); --primary-subtle: light-dark(var(--blue-50), var(--blue-950)); --on-primary-subtle: light-dark(var(--blue-900), var(--blue-200)); /* Secondary — Gelb (immer mit dunkler Schrift, nie Weiß auf Gelb) */ --secondary: var(--yellow-400); --secondary-hover: var(--yellow-300); --on-secondary: var(--neutral-975); /* Accent — Rot (Spark: 1× pro Screen, Aktion/Energie) */ --accent: var(--red-600); --accent-hover: var(--red-700); --on-accent: var(--white); --accent-text: light-dark(var(--red-600), var(--red-400)); /* Rot als Schrift */ /* Marken-Fläche: die "Ultramarin-Bühne" – identisch in Light & Dark */ --brand-surface: var(--blue-800); --on-brand: var(--white); --on-brand-accent: var(--yellow-400); /* Fokus (WCAG 2.2: sichtbar, ≥ 3:1) */ --focus: light-dark(var(--blue-800), var(--yellow-400)); /* Status – jeweils bg / fg / solid */ --success-bg: light-dark(var(--success-50), var(--success-950)); --success-fg: light-dark(var(--success-700), var(--success-300)); --success: light-dark(var(--success-600), var(--success-400)); --warning-bg: light-dark(var(--warning-50), var(--warning-950)); --warning-fg: light-dark(var(--warning-700), var(--warning-300)); --warning: light-dark(var(--warning-500), var(--warning-400)); --info-bg: light-dark(var(--info-50), var(--info-950)); --info-fg: light-dark(var(--info-700), var(--info-300)); --info: light-dark(var(--info-600), var(--info-400)); --danger-bg: light-dark(var(--danger-50), var(--danger-950)); --danger-fg: light-dark(var(--danger-700), var(--danger-300)); --danger: light-dark(var(--danger-600), var(--danger-400)); /* Signatur: Livery-Stripe (60 / 25 / 15) */ --livery: linear-gradient(100deg, var(--blue-800) 0 60%, var(--yellow-400) 60% 85%, var(--red-600) 85% 100%); } /* Manueller Theme-Switch (optional): */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Auf der Marken-Fläche: Fokus immer gelb */ .on-brand { --focus: var(--yellow-400); } /* ---------- 3) COMPONENT-Tokens (Beispiel) ---------- */ :root { --btn-primary-bg: var(--primary); --btn-primary-fg: var(--on-primary); --btn-secondary-bg: var(--secondary); --btn-secondary-fg: var(--on-secondary); --btn-accent-bg: var(--accent); --btn-accent-fg: var(--on-accent); --input-border: var(--border-strong); --input-border-focus: var(--focus); } /* ---------- 4) LAYOUT-, TYPO- & SEKTIONS-TOKENS (Ergänzung) ---------- */ :root { --font-head: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --container: 1200px; --radius-sm: 4px; /* Buttons, Inputs */ --radius-md: 8px; /* Karten, Bilder */ /* Spacing 4/8-pt */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-30: 7.5rem; /* Sektionen (Weiß/Grau alternierend, in Dark: Surface/Bg) */ --heading: light-dark(var(--blue-800), var(--neutral-50)); --section-a: var(--surface); --section-b: var(--bg); --contact-bg: var(--secondary); /* Variante: var(--brand-surface) */ --contact-fg: var(--on-secondary); --footer-top-bg: var(--brand-surface); --footer-bottom-bg: var(--neutral-975); --footer-bottom-fg: var(--neutral-300); --ph-bg: light-dark(var(--neutral-200), var(--neutral-800)); --ph-line: light-dark(var(--neutral-400), var(--neutral-700)); /* Weißanteile auf der Ultramarin-Bühne */ --on-brand-90: color-mix(in oklch, var(--white) 90%, transparent); --on-brand-80: color-mix(in oklch, var(--white) 80%, transparent); --on-brand-hover: color-mix(in oklch, var(--white) 12%, transparent); --on-brand-input-bg: var(--white); --on-brand-input-fg: var(--neutral-950); }