/* ============================================================================= * Design-Token des internen HR-Systems (Auftrag Abschnitt 2). * Nur Custom Properties und @font-face — keine Layoutregeln. * CSP-konform (style-src 'self'), keine CDN-Abhängigkeit. * Referenz: docs/ux/design-system.md * * Farbwelt: aus der Logodatei branding/logos.png ausgezählt, nicht geschätzt. * Leitblau #004890, Marken-Gelb #f8e000. Alle Paarungen auf WCAG AA geprüft; * die gemessenen Werte stehen als Kommentar an der jeweiligen Stelle. * ============================================================================= */ /* --- Hausschrift ----------------------------------------------------------- */ /* Selbst ausgeliefert (SIL OFL 1.1, siehe fonts/LICENSE-Manrope.txt). * Variable Achse 200–800: erlaubt echte Zwischenstufen statt nur 400/700. */ @font-face { font-family: "Manrope Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { color-scheme: light; /* --- Marke: Leitblau aus dem Logo ---------------------------------------- */ /* #004890 ist der im Logo gemessene EDEKA-Blauton und trägt als Primärfarbe. */ --color-brand-900: #04182f; /* Sidebar, tiefste Markenfläche */ --color-brand-800: #052a52; /* Verlaufspartner, Sidebar-Tiefe */ --color-brand-700: #003878; /* Hover primär, kräftige Flächen */ --color-brand-600: #004890; /* LEITFARBE: Buttons, Links, Akzentlinien */ --color-brand-500: #0d5bab; /* helle Variante auf dunklem Grund */ --color-brand-300: #8fb6dd; --color-brand-200: #c3d8ee; --color-brand-100: #dfeaf7; /* Tönung für Flächen */ --color-brand-050: #f1f6fc; /* sehr helle Tönung */ /* Kompatibilität: der frühere Akzent-Token zeigt jetzt auf die Leitfarbe. * Bestehende Regeln, die ihn noch nutzen, bleiben damit stimmig. */ --color-accent-500: #004890; --color-accent-100: #dfeaf7; /* --- Marken-Gelb ---------------------------------------------------------- */ /* Fläche und Markierung, nie Text auf Hell. Auf Blau 13,30:1, auf Gelb * trägt umgekehrt --color-brand-900 mit 13,30:1. Für Text auf Weiß gibt es * --color-gold-700 mit 4,92:1. */ --color-gold-500: #f8e000; --color-gold-600: #d8be00; --color-gold-700: #8a6d00; --color-gold-100: #fff8cc; /* --- Neutrale Töne, durchgehend blau unterlegt ---------------------------- */ --color-ink: #101a2b; /* Fließtext, 16,22:1 auf Canvas */ --color-ink-muted: #46536e; /* Sekundärtext, 7,18:1 auf Canvas */ --color-ink-subtle: #5d6b86; /* Meta, Eingaberahmen, 4,99:1 auf Canvas */ --color-surface: #ffffff; --color-surface-alt: #eff3f9; --color-surface-sunken: #e7edf6; --color-canvas: #f4f7fb; --color-line: #d3ddea; --color-line-strong: #b0c0d6; /* --- Semantik (Status) ---------------------------------------------------- */ --color-danger-700: #6f1a0e; --color-danger-500: #a8240f; --color-danger-200: #f2ccc5; --color-danger-100: #fceeeb; --color-warn-700: #7c5a06; --color-warn-500: #b9820b; --color-warn-200: #f0e0a6; --color-warn-100: #fdf7df; --color-success-700: #0f4f2a; --color-success-500: #176b3a; --color-success-200: #c6ddce; --color-success-100: #edf5ef; --color-info-700: #003878; --color-info-500: #004890; --color-info-200: #c3d8ee; --color-info-100: #dfeaf7; /* --- Dunkle Bühne (Bewerberstrecke und Anmeldung) ------------------------- */ /* Fast-Schwarz statt gesättigtem Navy: das Blau bleibt dem Logo und den * ruhigen Lichtkegeln vorbehalten, sonst kippt die ganze Fläche ins Bunte. * Flächen tragen einen harten Versatzschatten statt weicher Unschärfe — * dieselbe Bauweise wie in den übrigen eigenen Projekten. */ --d-bg: #0a0a0c; --d-surface: #16181d; --d-surface-2: #1c1f26; --d-surface-3: #242833; --d-line: #2a2e37; /* rein zierende Trennlinien */ --d-line-strong: #3c424f; /* Rahmen von Bedienelementen brauchen 3:1 gegen die Fläche (WCAG 1.4.11). * #697180 erreicht 3,61:1 auf --d-surface und 3,36:1 auf --d-surface-2; * die zierenden Linien oben erreichen das bewusst nicht und umranden * deshalb auch keine Eingabefelder. */ --d-line-input: #697180; --d-drop: #23262e; /* Versatzschatten der Flächen */ --d-ink: #f4f5f7; /* 15,9:1 auf --d-surface */ --d-ink-muted: #a8aeba; /* 7,3:1 auf --d-surface */ --d-ink-subtle: #848b98; /* 4,9:1 auf --d-surface */ --d-accent: #f8e000; /* Marken-Gelb: Handlungsfarbe auf Dunkel */ --d-accent-strong: #ffe93a; --d-accent-drop: #8a6d00; /* Versatzschatten unter der Primärtaste */ --d-on-accent: #1a1600; /* 14,9:1 auf --d-accent */ --d-blue: #5aa2ff; /* Verweise und Hinweise auf Dunkel */ /* --- Abstände ------------------------------------------------------------- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; /* --- Radien --------------------------------------------------------------- */ /* Konzentrisch gedacht: innen enger als außen, damit verschachtelte * Elemente nicht wie aufgeklebt wirken. */ --radius-sm: .3rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-pill: 999px; /* --- Typografie ----------------------------------------------------------- */ --font-sans: "Manrope Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace; --text-xs: .78rem; --text-sm: .875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.55; /* Große Überschriften brauchen negative Laufweite, kleine Versallabels * positive — sonst wirken erstere lose und letztere gedrängt. */ --tracking-tight: -.02em; --tracking-wide: .08em; /* --- Schatten, blau eingefärbt -------------------------------------------- */ /* Nie reines Schwarz: der Schatten trägt den Farbton der Fläche, auf der er * liegt. Einheitliche Lichtrichtung von oben. */ --shadow-1: 0 1px 2px rgba(4, 24, 47, .05), 0 1px 3px rgba(4, 24, 47, .08); --shadow-2: 0 2px 6px rgba(4, 24, 47, .07), 0 8px 20px rgba(4, 24, 47, .08); --shadow-3: 0 4px 12px rgba(4, 24, 47, .10), 0 16px 40px rgba(4, 24, 47, .12); --shadow-brand: 0 2px 6px rgba(0, 72, 144, .18), 0 8px 20px rgba(0, 72, 144, .16); --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, .10); /* --- Fokus ---------------------------------------------------------------- */ --focus-ring-width: 3px; --focus-ring-color: var(--color-brand-600); --focus-offset: 2px; /* --- Bewegung ------------------------------------------------------------- */ /* Eine Kurve für alles Alltägliche, eine weichere für Ein- und Ausblenden. * Bewegung bleibt kurz: das hier ist eine Arbeitsumgebung, keine Schaufläche. */ --ease-standard: cubic-bezier(.2, .7, .3, 1); --ease-out-soft: cubic-bezier(.16, 1, .3, 1); --dur-1: 120ms; /* Zustandswechsel an Bedienelementen */ --dur-2: 200ms; /* Flächen, Hover, Fokus */ --dur-3: 320ms; /* Einblenden, Drawer */ /* --- Ebenen (z-index) ----------------------------------------------------- */ --z-base: 0; --z-sticky: 10; --z-sidebar: 20; --z-topbar: 30; --z-dropdown: 40; --z-drawer-backdrop: 50; --z-drawer: 60; --z-dialog: 70; --z-toast: 80; --z-env-banner: 90; /* Umgebungshinweis: liegt ueber allem uebrigen */ /* --- Layout-Maße ---------------------------------------------------------- */ --content-max: 72rem; --content-narrow: 44rem; --content-wide: 96rem; --sidebar-w: 16.5rem; --topbar-h: 3.75rem; }