/* CherrySuite – Design Tokens */ :root { --brand-primary: #0071e3; --brand-primary-soft: rgba(0, 113, 227, 0.16); --brand-primary-hover: #0062c4; --brand-primary-light: #79b8ff; --background: #101012; --surface: #151719; --surface-hover: #202326; --border: #363c38; --text-primary: #f2f2ec; --text-secondary: #aab2ad; --text-muted: #7a827d; --success: #7ee0a0; --success-bg: #173021; --warning: #e0a850; --warning-bg: #3a2f1f; --danger: #ffb4b4; --danger-bg: #3a1f1f; --danger-strong: #c0392b; /* Akzentfarben fuer Text/Kennzeichen (im hellen Design dunkler, damit lesbar) */ --cs-gruen: #3fb27f; --cs-gelb: #f2c46b; --cs-rot: #ff8a7a; --cs-violett: #b79cff; --cs-blau: #8cc0ff; --cs-blau-2: #6aa9ff; --cs-gold: #e3b765; --surface-3: #2a2b31; --success-line: #2b5c3c; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 16px rgba(0,0,0,.35); --shadow-lg: 0 12px 32px rgba(0,0,0,.45); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --sidebar-width: 264px; --sidebar-width-collapsed: 76px; --topbar-height: 64px; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --transition-fast: 120ms ease; --transition-base: 200ms ease; } /* Erscheinungsbild (erscheinungsbild.py): . Dunkel = Werte oben. */ :root { color-scheme: dark; } :root[data-theme="hell"] { color-scheme: light; --background: #f3f3ef; --surface: #f8f8f5; --surface-hover: #ffffff; --surface-3: #ecede8; --border: #dcded8; --text-primary: #1c1f1d; --text-secondary: #4f5652; --text-muted: #7d847f; --success: #1e7a45; --success-bg: #e3f4e9; --success-line: #b5dcc4; --warning: #93600c; --warning-bg: #fbf0dc; --danger: #b3261e; --danger-bg: #fbe5e2; --cs-gruen: #1f8a5a; --cs-gelb: #93600c; --cs-rot: #c4372b; --cs-violett: #6e4fc2; --cs-blau: #0062c4; --cs-blau-2: #0062c4; --cs-gold: #8a6412; --brand-primary-light: var(--brand-primary-hover); --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.08); --shadow-lg: 0 12px 32px rgba(0,0,0,.12); } @media (prefers-color-scheme: light) { :root[data-theme="auto"] { color-scheme: light; --background: #f3f3ef; --surface: #f8f8f5; --surface-hover: #ffffff; --surface-3: #ecede8; --border: #dcded8; --text-primary: #1c1f1d; --text-secondary: #4f5652; --text-muted: #7d847f; --success: #1e7a45; --success-bg: #e3f4e9; --success-line: #b5dcc4; --warning: #93600c; --warning-bg: #fbf0dc; --danger: #b3261e; --danger-bg: #fbe5e2; --cs-gruen: #1f8a5a; --cs-gelb: #93600c; --cs-rot: #c4372b; --cs-violett: #6e4fc2; --cs-blau: #0062c4; --cs-blau-2: #0062c4; --cs-gold: #8a6412; --brand-primary-light: var(--brand-primary-hover); --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.08); --shadow-lg: 0 12px 32px rgba(0,0,0,.12); } }