/* ============================================================ COLORS — Bewerbungsmanager ------------------------------------------------------------ SEIT SESSION 1: OKLCH ist die AUTORENSPRACHE. Jeder Farbwert wird als oklch() gepflegt; die HEX/rgba-Werte sind nur noch ein @supports-FALLBACK für alte Umgebungen und Export-Tools (das alte Verhältnis — HEX Quelle, OKLCH Werkzeug — ist damit umgekehrt). Änderungen IMMER zuerst im OKLCH-Block, dann den Fallback daraus ableiten. ZWEI SCHICHTEN in dieser Datei: 1. PRIMITIVES — Ramps 50→900 je Familie, generiert durch reines Verschieben von L (C/H konstant; C wird nur dort reduziert, wo sRGB die volle Chroma nicht darstellen kann — markiert mit °). Namensschema: --- (sand, blue, teal, green, amber, red, indigo). 2. SEMANTIK (seit Session 2 formalisiert) — die von der App genutzten Rollen (--accent, --x-text, --x-soft, Neutrals, Text, Borders). Die bestehenden Namen SIND die Semantik- Ebene — keine parallelen --color-*-Namen. Jeder Wert trägt seine Ramp-Position als ≈-Kommentar, bleibt aber EXAKT (AA-geprüft in Session 1) — kein Einrasten auf Stufen. Rollen: accent = interaktiv · cyan = Info · green = Erfolg · amber = Warnung · red = Gefahr/destruktiv · indigo = Status „Optionen“. REGELN DER ZWEI EBENEN: - Komponenten konsumieren NUR Semantik, nie Primitives. - Themes (Dark, Session 5) und Print lenken NUR die Semantik um — Primitives werden nie gethemet. - Hook: [data-theme="dark"] auf ; Stub am Dateiende. Print via @media print. - --x-soft bleibt Alpha-Tint des Vivid (keine opake Stufe). Gerendertes Mapping: Token-Architektur.html THREE-VARIANT CONVENTION — per chromatic family: --x vivid → fills, dots, borders, icons, focus rings --x-text AA-dark → text (>=4.5:1 auf Weiß UND auf --x-soft, --x-soft gemessen über Weiß und über --bg) --x-soft tint → badge / chip background FAMILIEN-EXTRAS (nur wo eine Rolle sie braucht, kein Vollsatz): --x-hl stärkerer Text-Highlight-Fill für Annotations- Marker über Lesetext — mehr Präsenz als ein Badge. Nur auf green/cyan/accent/amber; Alpha-Tint des Vivid, kräftiger als --x-soft (0.17; amber 0.20). --accent-strong / --red-strong hover des Primär-/Destruktiv- Buttons · --red-bg opaker Banner-Fond. Und ein neutraler Extra: --glass frosted Overlay-Fill, gepaart mit backdrop-filter blur (Header, Topnav, Confirm-Leisten). Keine Familie — lebt in den Neutrals. PRINT: CMYK/Pantone wird aus den OKLCH-Werten abgeleitet und in der Karte „Farb-Architektur“ tabellarisch gepflegt — CMYK ist kein CSS-Token. Kontrast-Matrix: siehe Farbarchitektur.html (Werte belegt). Families: accent (blue), cyan (teal), green, amber, red, indigo. Neutrals carry the paper's warmth (hue ~78°) — no cool iOS grey. ============================================================ */ /* ============================================================ FALLBACK-SCHICHT — sRGB/HEX (abgeleitet, NICHT hier pflegen) ============================================================ */ :root { /* ---- Primitives: sand (warm neutral, H 79.6 / C 0.012) ---- */ --sand-50: #fbf6ee; --sand-100: #efeae2; --sand-200: #ddd8d0; --sand-300: #c5c0b8; --sand-400: #a9a49c; --sand-500: #8d8881; --sand-600: #75716a; --sand-700: #5e5a53; --sand-800: #48443e; --sand-900: #34302a; /* ---- Primitives: blue (H 254.1 / C 0.155) ---- */ --blue-50: #f1f7ff; --blue-100: #deedff; --blue-200: #c0dcff; --blue-300: #95c4ff; --blue-400: #5ea7ff; --blue-500: #3c8ae4; --blue-600: #2172c9; --blue-700: #005aac; --blue-800: #004485; --blue-900: #003060; /* ---- Primitives: teal (H 201.1 / C 0.109) ---- */ --teal-50: #e1fdff; --teal-100: #b2faff; --teal-200: #76eff7; --teal-300: #5bd6de; --teal-400: #37b9c1; --teal-500: #009ca4; --teal-600: #008188; --teal-700: #00686d; --teal-800: #004f54; --teal-900: #00383b; /* ---- Primitives: green (H 149.9 / C 0.150) ---- */ --green-50: #e5ffe9; --green-100: #baffc7; --green-200: #8bf5a3; --green-300: #72dc8c; --green-400: #53be70; --green-500: #32a155; --green-600: #06893e; --green-700: #006e30; --green-800: #005423; --green-900: #003c17; /* ---- Primitives: amber (H 67.5 / C 0.145) ---- */ --amber-50: #fff5eb; --amber-100: #ffe7ce; --amber-200: #ffcf9d; --amber-300: #fead4d; --amber-400: #e0912a; --amber-500: #bf7600; --amber-600: #9f6100; --amber-700: #804d00; --amber-800: #633a00; --amber-900: #472800; /* ---- Primitives: red (H 26.1 / C 0.199) ---- */ --red-50: #fff4f2; --red-100: #ffe4e1; --red-200: #ffcbc4; --red-300: #ffa69c; --red-400: #ff7268; --red-500: #e94743; --red-600: #cc282b; --red-700: #ad0015; --red-800: #86000d; --red-900: #610007; /* ---- Primitives: indigo (H 287.6 / C 0.149) ---- */ --indigo-50: #f6f6ff; --indigo-100: #e9e9ff; --indigo-200: #d6d4ff; --indigo-300: #bdb7ff; --indigo-400: #a094fc; --indigo-500: #8678dd; --indigo-600: #6f5fc3; --indigo-700: #5947a8; --indigo-800: #452f8e; --indigo-900: #321575; /* ===== Neutrals — warm paper ===== */ --bg: #f5f2ee; --surface: #ffffff; --surface-2: #f2efea; --surface-3: #eae5df; --glass: rgba(255,255,255,0.85); /* frosted overlay fill, mit backdrop-filter blur */ --fill: rgba(122,112,96,0.09); --fill-2: rgba(122,112,96,0.05); --sep: rgba(66,58,46,0.11); --bg-hover: rgba(56,48,36,0.05); /* ===== Text — a warm ramp, strongest to faintest ===== */ --text: #26221d; --text-2: #58534d; --text-3: #807b75; --text-on-color: #fff; /* ===== Borders ===== */ --border: rgba(56,48,36,0.10); --border-1: #d9d5cf; --border-strong: rgba(56,48,36,0.24); /* ===== Accent — Blue ===== */ --accent: #2676ce; --accent-soft: rgba(38,118,206,0.10); --accent-hl: rgba(38,118,206,0.17); /* annotation-highlight fill (frage) */ --accent-strong: #0862b8; --accent-text: #0b60b2; /* ===== Cyan — Teal ===== */ --cyan: #00a0a8; --cyan-soft: rgba(0,160,168,0.10); --cyan-hl: rgba(0,160,168,0.17); /* annotation-highlight fill (interessant) */ --cyan-text: #007277; /* ===== Green ===== */ --green: #2e9e52; --green-soft: rgba(46,158,82,0.10); --green-hl: rgba(46,158,82,0.17); /* annotation-highlight fill (erfahrung) */ --green-text: #26753e; /* Session 1: war #2b7942 — AA-Fix auf --green-soft über --bg */ /* ===== Amber ===== */ --amber: #ed9d3a; --amber-soft: rgba(237,157,58,0.16); --amber-hl: rgba(237,157,58,0.20); /* annotation-highlight fill (warnsignal) — amber hue is light, wants a touch more */ --amber-text: #935620; /* ===== Red — status / destructive ===== */ --red: #de3c3a; --red-soft: rgba(222,60,58,0.09); --red-strong: #c1201f; /* Session 7: Hover des destruktiven Buttons (Spiegel zu --accent-strong) */ --red-text: #b32926; --red-bg: #ffebe7; /* ===== Indigo — board column "Optionen" (status only) ===== */ --indigo: #7667cb; --indigo-soft: rgba(118,103,203,0.10); --indigo-text: #5d4fb3; } /* ============================================================ QUELL-SCHICHT — OKLCH (HIER pflegen; ° = Chroma sRGB-begrenzt) ============================================================ */ @supports (color: oklch(50% 0.1 200)) { :root { /* ---- Primitives: sand ---- */ --sand-50: oklch(97.5% 0.012 79.6); --sand-100: oklch(94.0% 0.012 79.6); --sand-200: oklch(88.5% 0.012 79.6); --sand-300: oklch(81.0% 0.012 79.6); --sand-400: oklch(72.0% 0.012 79.6); --sand-500: oklch(63.0% 0.012 79.6); --sand-600: oklch(55.0% 0.012 79.6); --sand-700: oklch(47.0% 0.012 79.6); --sand-800: oklch(39.0% 0.012 79.6); --sand-900: oklch(31.0% 0.012 79.6); /* ---- Primitives: blue ---- */ --blue-50: oklch(97.5% 0.012 254.1); /* ° */ --blue-100: oklch(94.0% 0.029 254.1); /* ° */ --blue-200: oklch(88.5% 0.057 254.1); /* ° */ --blue-300: oklch(81.0% 0.097 254.1); /* ° */ --blue-400: oklch(72.0% 0.149 254.1); /* ° */ --blue-500: oklch(63.0% 0.155 254.1); --blue-600: oklch(55.0% 0.155 254.1); --blue-700: oklch(47.0% 0.150 254.1); /* ° */ --blue-800: oklch(39.0% 0.125 254.1); /* ° */ --blue-900: oklch(31.0% 0.099 254.1); /* ° */ /* ---- Primitives: teal ---- */ --teal-50: oklch(97.5% 0.030 201.1); /* ° */ --teal-100: oklch(94.0% 0.072 201.1); /* ° */ --teal-200: oklch(88.5% 0.109 201.1); --teal-300: oklch(81.0% 0.109 201.1); --teal-400: oklch(72.0% 0.109 201.1); --teal-500: oklch(63.0% 0.107 201.1); /* ° */ --teal-600: oklch(55.0% 0.094 201.1); /* ° */ --teal-700: oklch(47.0% 0.080 201.1); /* ° */ --teal-800: oklch(39.0% 0.066 201.1); /* ° */ --teal-900: oklch(31.0% 0.053 201.1); /* ° */ /* ---- Primitives: green ---- */ --green-50: oklch(97.5% 0.040 149.9); /* ° */ --green-100: oklch(94.0% 0.102 149.9); /* ° */ --green-200: oklch(88.5% 0.150 149.9); --green-300: oklch(81.0% 0.150 149.9); --green-400: oklch(72.0% 0.150 149.9); --green-500: oklch(63.0% 0.150 149.9); --green-600: oklch(55.0% 0.150 149.9); --green-700: oklch(47.0% 0.130 149.9); /* ° */ --green-800: oklch(39.0% 0.108 149.9); /* ° */ --green-900: oklch(31.0% 0.086 149.9); /* ° */ /* ---- Primitives: amber ---- */ --amber-50: oklch(97.5% 0.017 67.5); /* ° */ --amber-100: oklch(94.0% 0.042 67.5); /* ° */ --amber-200: oklch(88.5% 0.084 67.5); /* ° */ --amber-300: oklch(81.0% 0.145 67.5); --amber-400: oklch(72.0% 0.145 67.5); --amber-500: oklch(63.0% 0.139 67.5); /* ° */ --amber-600: oklch(55.0% 0.121 67.5); /* ° */ --amber-700: oklch(47.0% 0.103 67.5); /* ° */ --amber-800: oklch(39.0% 0.086 67.5); /* ° */ --amber-900: oklch(31.0% 0.068 67.5); /* ° */ /* ---- Primitives: red ---- */ --red-50: oklch(97.5% 0.012 26.1); /* ° */ --red-100: oklch(94.0% 0.030 26.1); /* ° */ --red-200: oklch(88.5% 0.061 26.1); /* ° */ --red-300: oklch(81.0% 0.108 26.1); /* ° */ --red-400: oklch(72.0% 0.174 26.1); /* ° */ --red-500: oklch(63.0% 0.199 26.1); --red-600: oklch(55.0% 0.199 26.1); --red-700: oklch(47.0% 0.191 26.1); /* ° */ --red-800: oklch(39.0% 0.159 26.1); /* ° */ --red-900: oklch(31.0% 0.126 26.1); /* ° */ /* ---- Primitives: indigo ---- */ --indigo-50: oklch(97.5% 0.012 287.6); /* ° */ --indigo-100: oklch(94.0% 0.030 287.6); /* ° */ --indigo-200: oklch(88.5% 0.059 287.6); /* ° */ --indigo-300: oklch(81.0% 0.101 287.6); /* ° */ --indigo-400: oklch(72.0% 0.149 287.6); --indigo-500: oklch(63.0% 0.149 287.6); --indigo-600: oklch(55.0% 0.149 287.6); --indigo-700: oklch(47.0% 0.149 287.6); --indigo-800: oklch(39.0% 0.149 287.6); --indigo-900: oklch(31.0% 0.149 287.6); /* ===== Neutrals — warm paper (Ramp: sand) ===== */ --bg: oklch(96.2% 0.006 75.4); /* ≈ sand-50 */ --surface: oklch(100% 0 none); /* reines Weiß — oberhalb der Ramp */ --surface-2: oklch(95.3% 0.007 80.7); /* ≈ sand-100 */ --surface-3: oklch(92.4% 0.010 72.7); /* ≈ sand-100 (dunkler) */ --glass: oklch(100% 0 none / 0.85); /* frosted Overlay über backdrop-filter */ --fill: oklch(55.0% 0.027 79.6 / 0.09); /* Alpha-Tint · L = sand-600, C angehoben */ --fill-2: oklch(55.0% 0.027 79.6 / 0.05); /* Alpha-Tint · dito */ --sep: oklch(35.3% 0.023 77.9 / 0.11); /* Alpha ≈ sand-800 */ --bg-hover: oklch(31.4% 0.023 77.8 / 0.05); /* Alpha ≈ sand-900 */ /* ===== Text (Ramp: sand) ===== */ --text: oklch(25.5% 0.011 73.4); /* unterhalb sand-900 — dunkelster Wert des Systems */ --text-2: oklch(44.5% 0.012 72.5); /* ≈ sand-700 · 6.8:1 auf --bg */ --text-3: oklch(58.5% 0.011 72.6); /* ≈ sand-600 · 3.8:1 auf --bg — readable meta */ --text-on-color: oklch(100% 0 none); /* Weiß — nur auf Vivid --x */ /* ===== Borders (Ramp: sand) ===== */ --border: oklch(31.4% 0.023 77.8 / 0.10); /* Alpha ≈ sand-900 */ --border-1: oklch(87.4% 0.009 78.3); /* ≈ sand-200 */ --border-strong: oklch(31.4% 0.023 77.8 / 0.24); /* Alpha ≈ sand-900 */ /* ===== Accent — Blue · Rolle: interaktiv (Ramp: blue) ===== */ --accent: oklch(56.5% 0.155 254.1); /* ≈ blue-600 */ --accent-soft: oklch(56.5% 0.155 254.1 / 0.10); /* Alpha-Tint des Vivid */ --accent-hl: oklch(56.5% 0.155 254.1 / 0.17); /* Highlight-Tint (frage) — kräftiger als soft */ --accent-strong: oklch(49.9% 0.155 254.1); /* ≈ blue-700 */ --accent-text: oklch(49.1% 0.149 253.8); /* ≈ blue-700 · AA auf Weiß & Soft */ /* ===== Cyan — Teal · Rolle: Info (Ramp: teal) ===== */ --cyan: oklch(64.2% 0.109 201.1); /* ≈ teal-500 */ --cyan-soft: oklch(64.2% 0.109 201.1 / 0.10); /* Alpha-Tint des Vivid */ --cyan-hl: oklch(64.2% 0.109 201.1 / 0.17); /* Highlight-Tint (interessant) */ --cyan-text: oklch(50.2% 0.085 200.1); /* ≈ teal-700 · AA auf Weiß & Soft */ /* ===== Green · Rolle: Erfolg (Ramp: green) ===== */ --green: oklch(61.9% 0.150 149.9); /* ≈ green-500 */ --green-soft: oklch(61.9% 0.150 149.9 / 0.10); /* Alpha-Tint des Vivid */ --green-hl: oklch(61.9% 0.150 149.9 / 0.17); /* Highlight-Tint (erfahrung) */ --green-text: oklch(50.0% 0.115 150.1); /* ≈ green-700, C reduziert · Session 1: L 51.4→50.0 — AA auf soft über --bg */ /* ===== Amber · Rolle: Warnung (Ramp: amber) ===== */ --amber: oklch(75.9% 0.145 67.5); /* zwischen amber-300/400 — zu hell für Text, immer --amber-text nutzen */ --amber-soft: oklch(75.9% 0.145 67.5 / 0.16); /* Alpha-Tint des Vivid */ --amber-hl: oklch(75.9% 0.145 67.5 / 0.20); /* Highlight-Tint (warnsignal) — amber ist hell, will etwas mehr */ --amber-text: oklch(51.4% 0.105 58.2); /* ≈ amber-600 · Hue bewusst 58.2 (wärmer) für AA */ /* ===== Red · Rolle: Gefahr / destruktiv (Ramp: red) ===== */ --red: oklch(59.9% 0.199 26.1); /* ≈ red-500 */ --red-soft: oklch(59.9% 0.199 26.1 / 0.09); /* Alpha-Tint des Vivid */ --red-strong: oklch(53.5% 0.199 26.1); /* ≈ red-600 · Session 7: destruktiver Hover */ --red-text: oklch(50.5% 0.175 27.1); /* ≈ red-700 · AA auf Weiß & Soft */ --red-bg: oklch(95.5% 0.023 31.1); /* ≈ red-100 — opaker Banner-Fond */ /* ===== Indigo · Rolle: Status „Optionen“ (Ramp: indigo) ===== */ --indigo: oklch(57.5% 0.149 287.6); /* ≈ indigo-600 */ --indigo-soft: oklch(57.5% 0.149 287.6 / 0.10); /* Alpha-Tint des Vivid */ --indigo-text: oklch(49.5% 0.153 285.8); /* ≈ indigo-700 · AA auf Weiß & Soft */ } } /* ============================================================ DARK MODE (Session 5) — nur die Semantik umgelenkt ------------------------------------------------------------ Der Session-2-Kontrakt, jetzt gefüllt: gleiche Token-Namen, gespiegelte L-Werte, C/H bleiben je Familie erhalten — Primitives werden NIE gethemet. Warmes dunkles Papier (Hue ~76–78°), kein kaltes Schwarz. ENTSCHEIDUNGEN (AA rechnerisch belegt, s. Karte „Effekte, Motion & Dark Mode“): - Elevation kehrt sich um: heller = näher. --surface → -2 → -3 werden im Dunkeln STUFENWEISE HELLER; Schatten unterstützen nur noch (tokens/effects.css). - Vivids steigen auf L 66–78 % (sonst versinken sie im dunklen Grund); --x-text steigt auf L 74–80 % und bleibt AA ≥ 4.5:1 auf --surface-3 UND auf --x-soft über bg/surface-3. - --text-on-color kippt zur dunklen Tinte (= --bg): Weiß auf den helleren Dark-Vivids läge bei nur 2.0–3.4:1. Buttons tragen im Dunkeln dunkle Schrift auf hellem Vivid (5.2–8.5:1). - --x-soft bleibt Alpha-Tint des Vivid, Alpha leicht erhöht (0.15/0.18 statt 0.10/0.16) — Tints brauchen im Dunkeln mehr Substanz. --x-hl folgt (0.24; amber 0.26). - Schatten/Backdrop-Umlenkung: tokens/effects.css. Wie überall: OKLCH ist die Quelle, HEX/rgba der Fallback. ============================================================ */ /* ---- Fallback-Schicht (abgeleitet, NICHT hier pflegen) ---- */ [data-theme="dark"] { color-scheme: dark; /* Neutrals — dunkles warmes Papier */ --bg: #1c1914; --surface: #25211c; --surface-2: #2d2924; --surface-3: #36322c; --glass: rgba(37,33,28,0.85); /* frosted dunkles Papier ≈ --surface */ --fill: rgba(236,233,228,0.08); --fill-2: rgba(236,233,228,0.05); --sep: rgba(236,233,228,0.12); --bg-hover: rgba(236,233,228,0.06); /* Text */ --text: #ece9e4; --text-2: #bbb7b0; --text-3: #8a857f; --text-on-color: #1c1914; /* Borders */ --border: rgba(236,233,228,0.10); --border-1: #3e3a34; --border-strong: rgba(236,233,228,0.26); /* Accent — Blue */ --accent: #5fa1f0; --accent-soft: rgba(95,161,240,0.15); --accent-hl: rgba(95,161,240,0.24); --accent-strong: #77b4ff; --accent-text: #7fb4f6; /* Cyan — Teal */ --cyan: #3fb8c0; --cyan-soft: rgba(63,184,192,0.15); --cyan-hl: rgba(63,184,192,0.24); --cyan-text: #60bfc5; /* Green */ --green: #4ab166; --green-soft: rgba(74,177,102,0.15); --green-hl: rgba(74,177,102,0.24); --green-text: #69c27e; /* Amber */ --amber: #f4a442; --amber-soft: rgba(244,164,66,0.18); --amber-hl: rgba(244,164,66,0.26); --amber-text: #f1ae64; /* Red */ --red: #eb6d63; --red-soft: rgba(235,109,99,0.15); --red-strong: #ef7d72; /* Hover wird im Dunkeln HELLER */ --red-text: #f49289; --red-bg: #46221e; /* Indigo */ --indigo: #9a90ed; --indigo-soft: rgba(154,144,237,0.15); --indigo-text: #ada6f3; } /* ---- Quell-Schicht — OKLCH (HIER pflegen) ---- */ @supports (color: oklch(50% 0.1 200)) { [data-theme="dark"] { /* ===== Neutrals — dunkles warmes Papier (Ramp: sand) ===== */ --bg: oklch(21.5% 0.010 78); /* unterhalb sand-900 — Spiegel von --text (25.5 %) */ --surface: oklch(25.0% 0.011 76); /* Elevation: heller = näher */ --surface-2: oklch(28.5% 0.011 76); --surface-3: oklch(32.0% 0.012 76); /* ≈ sand-900, Field-Wells */ --glass: oklch(25.0% 0.011 76 / 0.85); /* frosted ≈ --surface (dunkel) */ --fill: oklch(93.5% 0.008 78 / 0.08); /* Alpha-Tint jetzt HELL über dunklem Grund */ --fill-2: oklch(93.5% 0.008 78 / 0.05); --sep: oklch(93.5% 0.008 78 / 0.12); --bg-hover: oklch(93.5% 0.008 78 / 0.06); /* ===== Text (Ramp: sand, gespiegelt) ===== */ --text: oklch(93.5% 0.008 78); /* 14.5:1 auf --bg */ --text-2: oklch(78.0% 0.010 76); /* 8.8:1 auf --bg · 6.4:1 auf --surface-3 */ --text-3: oklch(62.0% 0.011 75); /* 4.8:1 auf --bg — readable meta */ --text-on-color: oklch(21.5% 0.010 78); /* dunkle Tinte auf hellen Dark-Vivids (s. Kopf) */ /* ===== Borders ===== */ --border: oklch(93.5% 0.008 78 / 0.10); --border-1: oklch(35.0% 0.012 78); --border-strong: oklch(93.5% 0.008 78 / 0.26); /* ===== Accent — Blue (Ramp: blue) ===== */ --accent: oklch(70% 0.135 254.1); /* ≈ blue-400 */ --accent-soft: oklch(70% 0.135 254.1 / 0.15); --accent-hl: oklch(70% 0.135 254.1 / 0.24); --accent-strong: oklch(76% 0.125 254.1); /* Hover wird im Dunkeln HELLER */ --accent-text: oklch(76% 0.110 254.1); /* ≈ blue-300 · AA auf surface-3 & Soft */ /* ===== Cyan — Teal (Ramp: teal) ===== */ --cyan: oklch(72% 0.105 201.1); /* ≈ teal-400 */ --cyan-soft: oklch(72% 0.105 201.1 / 0.15); --cyan-hl: oklch(72% 0.105 201.1 / 0.24); --cyan-text: oklch(75% 0.090 201.1); /* AA auf surface-3 & Soft */ /* ===== Green (Ramp: green) ===== */ --green: oklch(68% 0.145 149.9); /* zwischen green-400/500 */ --green-soft: oklch(68% 0.145 149.9 / 0.15); --green-hl: oklch(68% 0.145 149.9 / 0.24); --green-text: oklch(74% 0.130 149.9); /* AA auf surface-3 & Soft */ /* ===== Amber (Ramp: amber) ===== */ --amber: oklch(78% 0.145 67.5); /* ≈ amber-300 — weiterhin nie als Text */ --amber-soft: oklch(78% 0.145 67.5 / 0.18); --amber-hl: oklch(78% 0.145 67.5 / 0.26); --amber-text: oklch(80% 0.120 67.5); /* Hue zurück auf 67.5 — hell braucht keine Wärmung */ /* ===== Red (Ramp: red) ===== */ --red: oklch(68.5% 0.160 26.1); /* ≈ red-400 · 1.0.1: von 66 % angehoben — dunkle Tinte maß 4.36:1, jetzt ≥ 4.5:1 */ --red-soft: oklch(68.5% 0.160 26.1 / 0.15); --red-strong: oklch(71% 0.155 26.1); /* Hover wird im Dunkeln HELLER */ --red-text: oklch(76% 0.120 26.1); /* ≈ red-300 · AA auf surface-3 & Soft */ --red-bg: oklch(30% 0.055 27); /* dunkler opaker Banner-Fond · red-text 6.2:1 */ /* ===== Indigo (Ramp: indigo) ===== */ --indigo: oklch(70% 0.135 287.6); /* ≈ indigo-400 */ --indigo-soft: oklch(70% 0.135 287.6 / 0.15); --indigo-text: oklch(76% 0.110 287.6); /* ≈ indigo-300 · AA auf surface-3 & Soft */ } } /* ============================================================ DATA-VIZ (Session 14) — Grundlagen, keine Komponenten ------------------------------------------------------------ Charts erfinden keine Farben: alles sind Aliase auf die fünf Familien (+ Indigo), dadurch automatisch dark-mode-fähig und AA-belegt. Zwei Regeln: 1. STATUS-CHARTS (Bewerbungen pro Status) nutzen exakt die Statusfarbe der Board-Spalte — nie die Sequenz. 2. KATEGORIALE REIHEN ohne Status-Bedeutung nutzen die feste Sequenz --chart-1…5 in dieser Reihenfolge; Rot bleibt außen vor (Gefahr-Semantik). Achsen/Raster: Gridlines --sep · Achsenlinie --border-strong · Labels --text-2 (Floor: --text-3) · Werte im Chart nie auf Vivid-Flächen, sondern daneben in --text-2. Nie Farbe allein: Reihen zusätzlich per Label/Muster unterscheiden (Accessibility, Session 12). ============================================================ */ :root { --chart-1: var(--accent); /* Blau */ --chart-2: var(--amber); /* Amber — nie als Text, nur Fläche/Linie */ --chart-3: var(--cyan); /* Teal */ --chart-4: var(--indigo); /* Indigo — hier erlaubt: Sequenz, kein Dekor */ --chart-5: var(--green); /* Grün */ }