/* ============================================================ tokens.css — PflichtPilot v2.0 Single source of truth for design tokens (colors, typography, spacing, shadows, radii, breakpoints, theme system). Loaded FIRST on every page. Defines CSS custom properties only. ============================================================ */ /* ============================================================ TOKENS ============================================================ */ :root { /* Surfaces & backgrounds */ --canvas: #F6F8FA; /* Page background — subtle blue-grey */ --surface: #FFFFFF; /* Card / section background */ --surface-tint: #F8F9FA; /* Slightly muted card */ --surface-tint2: #F2F4F7; /* Even more muted */ /* Text & ink */ --ink: #26313D; /* Body text */ --ink-strong: #143554; /* Headlines, primary CTA bg */ --ink-deep: #0E2742; /* Final-CTA dark section, hover-state for primary */ --muted: #485564; /* Secondary text — WCAG AA pass on canvas */ --muted-2: #5A6675; /* Tertiary text — WCAG AA pass on canvas */ --muted-3: #7A8593; /* Placeholders, sub-quiet (lower contrast intentional) */ /* Brand accent */ --green: #5A8D30; /* Brand accent — used for eyebrow + check icons + green CTA */ --green-soft: #EAF1E0; /* Soft green tint for pill backgrounds */ /* App stat colors — used in app dashboard stat cards. Color-coded by data type, not urgency. DNA-conform: shows derived state, no scheduling implication. */ --stat-green: #5A8D30; /* Iterations dokumentiert / confirmed */ --stat-red: #C9484C; /* Lücken / ohne Nachweis */ --stat-blue: #2B6A9A; /* Nachweise gesamt */ --stat-amber: #C8932B; /* Anstehend (derived from due date) */ /* App-shell tokens — sidebar uses --ink-strong as background. In dark mode, sidebar gets a deeper variant for separation from canvas. */ --app-sidebar-bg: #143554; --app-sidebar-fg: #E5EAF1; --app-sidebar-fg-mut: rgba(229, 234, 241, 0.65); --app-sidebar-border: rgba(255, 255, 255, 0.08); --app-sidebar-active-bg: #FFFFFF; --app-sidebar-active-fg: #143554; /* Interactive states */ --toggle-active-bg: var(--ink-strong); /* Theme-toggle pressed-state bg (light theme) */ --toggle-active-fg: #FFFFFF; /* Theme-toggle pressed-state text (light theme) */ /* Primary CTA button (.btn) — solid filled. Light theme: brand-dark-blue. Dark theme switches to green for contrast. */ --btn-primary-bg: #143554; --btn-primary-bg-hover: #0E2742; --btn-primary-fg: #FFFFFF; /* Inverted card (.wa-compare__card--pos, etc.) — dark block on light page */ --inverted-card-bg: #143554; --inverted-card-fg: #FFFFFF; --inverted-card-border: #0E2742; /* Borders */ --border: rgba(20, 35, 58, 0.08); --border-soft: rgba(20, 35, 58, 0.06); --border-hard: rgba(20, 35, 58, 0.14); /* Shadows */ --shadow-card: 0 1px 2px rgba(20, 35, 58, 0.04); --shadow-soft: 0 12px 32px rgba(20,35,58,0.08); --shadow-deep: 0 24px 60px rgba(20,35,58,0.18); /* Radii */ --radius-lg: 24px; /* Section cards */ --radius-md: 16px; /* Inner cards (problem-card, vs-card, step) */ --radius-sm: 12px; /* Smaller cards (wa-item, gl-card, faq) */ --radius-xs: 8px; /* Buttons, micro-elements */ /* Section gradient — pre-Claude-Design rebuild values, slightly bumped so atmospheric tint is visible. */ --section-bg: radial-gradient(700px 250px at 20% 10%, rgba(43,106,154,0.10), rgba(43,106,154,0) 60%), radial-gradient(520px 220px at 80% 0%, rgba(43,106,154,0.08), rgba(43,106,154,0) 55%), radial-gradient(700px 250px at 20% 10%, rgba(43,106,154,0.10), rgba(43,106,154,0) 60%), radial-gradient(520px 220px at 80% 0%, rgba(43,106,154,0.08), rgba(43,106,154,0) 55%), linear-gradient(180deg, rgba(43,106,154,0.08), rgba(43,106,154,0)); --container: 1360px; --pad-x-mobile: 16px; --pad-x-desktop: 40px; /* Page-level atmospheric gradient — viewport-fixed, positioned at the LEFT and RIGHT edges so the radials peek into side-margins past the container cards. Without edge-bleed positioning, cards (with --surface) would cover the gradient entirely. */ --page-bg: radial-gradient(900px 1100px at -8% 30%, rgba(43,106,154,0.14), rgba(43,106,154,0) 70%), radial-gradient(900px 1100px at 108% 30%, rgba(43,106,154,0.12), rgba(43,106,154,0) 70%), radial-gradient(700px 500px at 50% -10%, rgba(43,106,154,0.06), rgba(43,106,154,0) 70%); } [data-theme="dark"] { --canvas: #0B1722; --surface: #142031; --surface-tint: #182739; --surface-tint2: #1B2C40; --ink: #E5EAF1; --ink-strong: #F4F7FB; --ink-deep: #06111C; --muted: #9AA7B6; --muted-2: #7E8C9C; --muted-3: #6A7786; --green: #6BB042; --green-soft: rgba(107, 176, 66, 0.12); /* App stat colors (dark) */ --stat-green: #6BB042; --stat-red: #E07070; --stat-blue: #4FA0D6; --stat-amber: #E0B560; /* App-shell sidebar — in dark theme, deeper to separate from canvas */ --app-sidebar-bg: #06111C; --app-sidebar-fg: #E5EAF1; --app-sidebar-fg-mut: rgba(229, 234, 241, 0.6); --app-sidebar-border: rgba(255, 255, 255, 0.06); --app-sidebar-active-bg: rgba(107, 176, 66, 0.15); --app-sidebar-active-fg: #FFFFFF; /* Dark-mode toggle: green accent on dark surface (NOT --ink-strong which is near-white). */ --toggle-active-bg: var(--green); --toggle-active-fg: #0B1722; /* Dark-mode primary CTA — green button with white text (high contrast on dark canvas) */ --btn-primary-bg: #6BB042; --btn-primary-bg-hover: #5A8D30; --btn-primary-fg: #FFFFFF; /* Dark-mode inverted card — keep dark, even darker than canvas for separation */ --inverted-card-bg: #06111C; --inverted-card-fg: #FFFFFF; --inverted-card-border: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.08); --border-soft: rgba(255, 255, 255, 0.06); --border-hard: rgba(255, 255, 255, 0.14); --shadow-card: 0 1px 2px rgba(0,0,0,0.4); --shadow-soft: 0 12px 32px rgba(0,0,0,0.4); --shadow-deep: 0 24px 60px rgba(0,0,0,0.55); --section-bg: radial-gradient(700px 250px at 20% 10%, rgba(43,106,154,0.14), rgba(43,106,154,0) 60%), radial-gradient(520px 220px at 80% 0%, rgba(43,106,154,0.10), rgba(43,106,154,0) 55%), radial-gradient(700px 250px at 20% 10%, rgba(43,106,154,0.14), rgba(43,106,154,0) 60%), radial-gradient(520px 220px at 80% 0%, rgba(43,106,154,0.10), rgba(43,106,154,0) 55%), linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); --page-bg: radial-gradient(900px 1100px at -8% 30%, rgba(43,106,154,0.18), rgba(43,106,154,0) 70%), radial-gradient(900px 1100px at 108% 30%, rgba(43,106,154,0.16), rgba(43,106,154,0) 70%), radial-gradient(700px 500px at 50% -10%, rgba(43,106,154,0.08), rgba(43,106,154,0) 70%); }