/* =========================================================================== DIEPA × OpenCloud — Color tokens --------------------------------------------------------------------------- Two layers: 1. DIEPA brand palette (--diepa-*) — the raw, immutable brand colors taken verbatim from the DIEPA Markenbuch (Claus Koch, 2026). 2. OpenCloud role tokens (--oc-role-*) — Material-3 semantic roles, the contract every component reads. We "melt" DIEPA into OpenCloud by mapping these roles onto the DIEPA palette while preserving the OpenCloud / WCAG 2.1 AA contrast behaviour. Always style components against --oc-role-* — never hard-code a brand hex. Quelle: Design-Projekt diepa-opencloud-design-system, tokens/colors.css. =========================================================================== */ :root { /* ---- 1. DIEPA brand palette ------------------------------------------- */ --diepa-nacht: #002454; /* D Nacht · PANTONE 655 */ --diepa-aktiv: #FF8300; /* D Aktiv · PANTONE 151 */ --diepa-energie: #CB122D; /* D Energie· PANTONE 185 */ --diepa-nacht-82: #314671; --diepa-nacht-57: #6E799A; --diepa-nacht-32: #ABB1C5; --diepa-nacht-7: #F0F1F5; --diepa-weiss: #FFFFFF; --diepa-schwarz: #000000; --diepa-nacht-3: #F7F8FA; --diepa-nacht-12: #E7EAF1; --diepa-nacht-18: #DDE1EA; --diepa-nacht-24: #D5D9E2; --diepa-nacht-container: #DCE4F2; --diepa-aktiv-container: #FFE8CC; --diepa-energie-container: #FBE0E3; --diepa-gradient-sign: linear-gradient(135deg, var(--diepa-energie) 0%, var(--diepa-aktiv) 100%); --diepa-gradient-sign-h: linear-gradient(90deg, var(--diepa-energie) 0%, var(--diepa-aktiv) 100%); /* UI-Semantik, kein Markenbuch-Ton (SIGN-OFF: Status schlägt Markenreinheit) */ --diepa-grün: #2E7D4F; --diepa-grün-container: #DDF1E5; /* ---- 2. OpenCloud role tokens (light, default) ------------------------ */ --oc-role-primary: var(--diepa-nacht); --oc-role-on-primary: #FFFFFF; --oc-role-primary-hover: #001B40; --oc-role-primary-active: #00132E; --oc-role-primary-container: var(--diepa-nacht-container); --oc-role-on-primary-container: var(--diepa-nacht); --oc-role-secondary: var(--diepa-nacht-82); --oc-role-on-secondary: #FFFFFF; --oc-role-secondary-container: #E6E9F1; --oc-role-on-secondary-container: #2A3556; --oc-role-tertiary: var(--diepa-aktiv); --oc-role-on-tertiary: var(--diepa-nacht); --oc-role-tertiary-container: var(--diepa-aktiv-container); --oc-role-on-tertiary-container: #5A2E00; --oc-role-error: var(--diepa-energie); --oc-role-on-error: #FFFFFF; --oc-role-error-container: var(--diepa-energie-container); --oc-role-on-error-container: #7A0A1A; --oc-role-warning: var(--diepa-aktiv); --oc-role-on-warning: var(--diepa-nacht); --oc-role-warning-container: var(--diepa-aktiv-container); --oc-role-on-warning-container: #5A2E00; --oc-role-success: var(--diepa-grün); --oc-role-on-success: #FFFFFF; --oc-role-success-container: var(--diepa-grün-container); --oc-role-on-success-container: #11522F; --oc-role-info: var(--diepa-nacht-82); --oc-role-on-info: #FFFFFF; --oc-role-info-container: #E6E9F1; --oc-role-on-info-container: #2A3556; --oc-role-background: var(--diepa-nacht-3); --oc-role-on-background: var(--diepa-nacht); --oc-role-surface: #FFFFFF; --oc-role-on-surface: var(--diepa-nacht); --oc-role-on-surface-variant: var(--diepa-nacht-57); --oc-role-surface-variant: var(--diepa-nacht-7); --oc-role-surface-container-lowest: #FFFFFF; --oc-role-surface-container-low: var(--diepa-nacht-3); --oc-role-surface-container: var(--diepa-nacht-7); --oc-role-surface-container-high: var(--diepa-nacht-12); --oc-role-surface-container-highest: var(--diepa-nacht-18); --oc-role-outline: var(--diepa-nacht-57); --oc-role-outline-variant: var(--diepa-nacht-24); --oc-role-inverse-surface: var(--diepa-nacht); --oc-role-inverse-on-surface: #FFFFFF; --oc-role-inverse-primary: var(--diepa-aktiv); --oc-role-focus: var(--diepa-nacht); --oc-role-scrim: rgba(0, 19, 46, 0.55); --oc-role-hover-overlay: rgba(0, 36, 84, 0.06); --oc-role-active-overlay: rgba(0, 36, 84, 0.12); /* ---- Selected / active state (THEME-STABLE) --------------------------- */ --oc-role-active: var(--diepa-aktiv); --oc-role-on-active: var(--diepa-nacht); --oc-role-active-container: color-mix(in srgb, var(--diepa-aktiv) 14%, transparent); --oc-role-on-active-container: var(--oc-role-on-surface); /* ---- Chrome (app bars) — THEME-STABLE inverse surface ----------------- */ --oc-role-chrome: var(--diepa-nacht); --oc-role-on-chrome: #FFFFFF; --oc-role-on-chrome-variant: var(--diepa-nacht-32); /* ---- Fixed tokens — identical in light & dark ------------------------- */ --oc-role-primary-fixed: var(--diepa-nacht); --oc-role-on-primary-fixed: #FFFFFF; --oc-role-tertiary-fixed: var(--diepa-aktiv); --oc-role-on-tertiary-fixed: var(--diepa-nacht); --oc-role-on-inverse: #FFFFFF; --oc-role-icon-folder: var(--diepa-aktiv); --oc-role-icon-favorite: var(--diepa-aktiv); --oc-role-icon-shared: var(--diepa-nacht-82); --oc-role-icon-danger: var(--diepa-energie); /* ---- Trust / privacy chip — "kandidatensicher" signal ----------------- */ --oc-role-trust-container: #E9EEF8; --oc-role-on-trust-container: var(--diepa-nacht); --oc-role-trust-icon: var(--oc-role-primary); --oc-role-trust-outline: var(--diepa-nacht-18); /* ---- v2 — promoted from inline use in the Kandidaten-Reise build ------ */ --oc-role-trust-surface: var(--oc-role-trust-container); --oc-role-on-trust: var(--oc-role-on-trust-container); --oc-role-rank-bg: var(--diepa-aktiv); --oc-role-on-rank: var(--diepa-nacht); --oc-role-working: var(--oc-role-tertiary); --oc-role-working-done: var(--oc-role-success); --oc-role-waiting: var(--oc-role-outline); --oc-role-selectable-border-on: var(--diepa-aktiv); --oc-role-selectable-ring: color-mix(in srgb, var(--diepa-aktiv) 16%, transparent); --oc-role-express: var(--oc-role-tertiary-container); --oc-role-on-express: var(--oc-role-on-tertiary-container); } /* ---- Dark theme — literally "D Nacht" ------------------------------------ */ [data-theme="dark"] { --oc-role-primary: #9FB6DC; --oc-role-on-primary: #00132E; --oc-role-primary-hover: #B6C8E6; --oc-role-primary-active: #C9D6EE; --oc-role-primary-container: #1B3361; --oc-role-on-primary-container: #DCE4F2; --oc-role-secondary: #ABB1C5; --oc-role-on-secondary: #11203F; --oc-role-secondary-container: #2B3A5C; --oc-role-on-secondary-container: #DDE1EA; --oc-role-tertiary: var(--diepa-aktiv); --oc-role-on-tertiary: #2A1500; --oc-role-tertiary-container: #5A2E00; --oc-role-on-tertiary-container: #FFE8CC; --oc-role-error: #FF8A98; --oc-role-on-error: #5A0410; --oc-role-error-container: #8C1122; --oc-role-on-error-container: #FFD9DE; --oc-role-warning: var(--diepa-aktiv); --oc-role-on-warning: #2A1500; --oc-role-warning-container: #5A2E00; --oc-role-on-warning-container: #FFE8CC; --oc-role-success: #7FD3A2; --oc-role-on-success: #06351C; --oc-role-success-container: #1B5436; --oc-role-on-success-container: #DDF1E5; --oc-role-background: #00132E; --oc-role-on-background: #EAEDF4; --oc-role-surface: #04224D; --oc-role-on-surface: #EAEDF4; --oc-role-on-surface-variant: #ABB1C5; --oc-role-surface-variant: #1B3361; --oc-role-surface-container-lowest: #00102B; --oc-role-surface-container-low: #04224D; --oc-role-surface-container: #0B2C57; --oc-role-surface-container-high: #15366A; --oc-role-surface-container-highest: #1F4078; --oc-role-outline: #6E799A; --oc-role-outline-variant: #314671; --oc-role-inverse-surface: #EAEDF4; --oc-role-inverse-on-surface: #002454; --oc-role-inverse-primary: var(--diepa-nacht); --oc-role-focus: var(--diepa-aktiv); --oc-role-scrim: rgba(0, 8, 20, 0.66); --oc-role-hover-overlay: rgba(255, 255, 255, 0.07); --oc-role-active-overlay: rgba(255, 255, 255, 0.13); --oc-role-active: var(--diepa-aktiv); --oc-role-on-active: #2A1500; --oc-role-trust-container: #12305C; --oc-role-on-trust-container: #EAEDF4; --oc-role-trust-outline: #1F4078; }