/* ============================================================ it-now Design Tokens — Prefix --itn- Konvention: Standard-Theme = DUNKEL. Heller Modus NUR manuell via . Kein Auto-prefers-color-scheme. ============================================================ */ :root { /* --- Markenfarben (aus dem Logo gesampelt) --- */ --itn-ink: #11141C; --itn-panel: #1A1F2A; --itn-panel-deep: #161B25; --itn-blue: #1B6AA3; --itn-sky: #53A0CC; --itn-glow: #6DB8E8; --itn-offwhite: #F4F3F1; --itn-blue-tint: rgba(83, 160, 204, .14); --itn-glow-border: rgba(109, 184, 232, .4); /* --- Statusfarben --- */ --itn-success: #3FB97C; --itn-success-tint: rgba(63, 185, 124, .14); --itn-warning: #E0A93E; --itn-warning-tint: rgba(224, 169, 62, .14); --itn-danger: #E25B5B; --itn-danger-tint: rgba(226, 91, 91, .14); --itn-info: var(--itn-sky); --itn-info-tint: var(--itn-blue-tint); /* --- Rollen-Tokens (Theme-abhängig) — Standard: DUNKEL --- */ --itn-bg: var(--itn-ink); --itn-surface: var(--itn-panel); --itn-surface-subtle: #141823; --itn-text: #EEF1F5; --itn-text-soft: #B7BFCA; --itn-text-muted: #9AA4B2; --itn-border: rgba(255, 255, 255, .08); --itn-accent-text: var(--itn-glow); --itn-hero-gradient: linear-gradient(115deg, transparent 62%, rgba(83, 160, 204, .16) 62%), linear-gradient(245deg, transparent 78%, rgba(27, 106, 163, .25) 78%), radial-gradient(700px 380px at 80% 0%, rgba(83, 160, 204, .18), transparent 70%); /* --- Kontrastblock: im Dark-Theme IMMER hell (beide Themes identisch) --- */ --itn-contrast-bg: #F4F6F9; --itn-contrast-text: #181C25; --itn-contrast-soft: #4A515E; /* --- Typografie --- */ --itn-font: 'Space Grotesk', system-ui, -apple-system, sans-serif; --itn-tracking-tight: -0.02em; /* --- Geometrie & Effekte --- */ --itn-radius: 12px; --itn-radius-sm: 6px; --itn-shadow-glow: 0 0 24px rgba(83, 160, 204, .35); --itn-shadow-card: 0 10px 30px rgba(0, 0, 0, .25); --itn-grad-accent: linear-gradient(120deg, var(--itn-blue), var(--itn-sky)); --itn-grad-text: linear-gradient(100deg, var(--itn-glow), var(--itn-sky)); --itn-grad-topline: linear-gradient(90deg, var(--itn-blue), var(--itn-sky), transparent); } [data-theme="light"] { --itn-bg: #F7F8FA; --itn-surface: #FFFFFF; --itn-surface-subtle: #EEF1F5; --itn-text: #181C25; --itn-text-soft: #3E4654; --itn-text-muted: #5B6470; --itn-border: #DEE3EA; --itn-accent-text: var(--itn-blue); --itn-shadow-card: 0 10px 30px rgba(24, 28, 37, .10); --itn-hero-gradient: linear-gradient(115deg, transparent 62%, rgba(83, 160, 204, .12) 62%), linear-gradient(245deg, transparent 78%, rgba(27, 106, 163, .14) 78%), radial-gradient(700px 380px at 80% 0%, rgba(83, 160, 204, .12), transparent 70%); } /* Bewusst DEAKTIVIERT — Standard ist dunkel, hell nur manuell (User-Konvention): @media (prefers-color-scheme: light) { :root:not([data-theme]) { ... } } */