/* AUTO-GENERATED — DO NOT EDIT. * Source: frontend/src/styles/tokens.css * Sync-Script: frontend/scripts/sync-public-tokens.js * ADR-0031 — Single-Source-of-Truth fuer Design-Tokens. */ /* ─── CORX Design Tokens ───────────────────────────────────── * Single Source of Truth fuer alle Farben, Abstände, Radien. * Komponenten nutzen var(--ui-*) statt hardcoded Werte. * Theme-Wechsel laeuft ueber data-theme Attribut auf . * ──────────────────────────────────────────────────────────── */ /* ─── Dark Theme (Default) ────────────────────────────────── */ :root, [data-theme="dark"] { color-scheme: dark; /* Hintergruende */ --ui-bg: #0f172a; --ui-bg-app: #08090e; --ui-bg-card: rgba(255,255,255,0.03); --ui-bg-card-hover: rgba(20,184,166,0.06); --ui-input-bg: rgba(255,255,255,0.05); --ui-modal-bg: #0f1117; --ui-header-bg: rgba(8,9,14,0.9); --ui-norm-bg: rgba(15,34,85,0.8); /* Rahmen */ --ui-border: rgba(255,255,255,0.08); --ui-border-input: rgba(255,255,255,0.1); --ui-border-focus: rgba(20,184,166,0.4); /* Text */ --ui-text: #f8fafc; --ui-text-secondary: #cbd5e1; --ui-text-muted: #94a3b8; --ui-text-dim: #94a3b8; /* ADR-0031: war #64748b (4,4:1) */ --ui-placeholder: #94a3b8; /* ADR-0031: war #334155 (1,9:1) */ /* Akzent */ --ui-accent: #14b8a6; --ui-accent-dark: #0d9488; --ui-accent-bg: rgba(20,184,166,0.12); --ui-accent-border: rgba(20,184,166,0.25); /* Primaer (Buttons, Badges) */ --ui-primary: #14b8a6; --ui-primary-hover: #2dd4bf; --ui-primary-dark: #0d9488; /* Status-Farben */ --ui-success: #22c55e; --ui-success-bg: rgba(34,197,94,0.12); --ui-success-border:rgba(34,197,94,0.25); --ui-danger: #ef4444; --ui-danger-light: #f87171; --ui-danger-bg: rgba(239,68,68,0.1); --ui-danger-border: rgba(239,68,68,0.25); --ui-warning: #f59e0b; --ui-warning-bg: rgba(245,158,11,0.12); --ui-warning-border:rgba(245,158,11,0.25); --ui-info: #3b82f6; --ui-info-bg: rgba(59,130,246,0.12); --ui-info-border: rgba(59,130,246,0.25); /* Akzent-Lights (ADR-0031 Phase 2.x — Landing+App-Konsolidierung) */ --ui-primary-light: #5eead4; --ui-primary-icy: #99f6e4; --ui-warning-bright: #fbbf24; --ui-success-emerald:#10b981; --ui-info-sky: #0ea5e9; --ui-purple: #8b5cf6; --ui-purple-light: #c4b5fd; --ui-purple-bg: rgba(139,92,246,0.12); --ui-purple-border: rgba(139,92,246,0.3); /* Indigo-Skala / Gray-Skala / Custom-Akzente (ADR-0031 Phase 1b 2026-05-08 — bisher hardcoded, jetzt Token) */ --ui-indigo: #6366f1; --ui-indigo-light: #818cf8; --ui-indigo-soft: #a5b4fc; --ui-gray: #6b7280; --ui-gray-soft: #9ca3af; --ui-gray-deep: #374151; --ui-danger-soft: #fca5a5; --ui-success-deep: #16a34a; --ui-success-light: #34d399; --ui-bg-tinted: #f1f5f9; --ui-bg-deep: #1a1a2e; /* Dekorative Elemente */ --ui-gradient-bg: radial-gradient(ellipse 60% 50% at 25% 50%, rgba(20,184,166,0.10) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 30%, rgba(13,148,136,0.05) 0%, transparent 60%); --ui-deco-line: linear-gradient(to bottom, transparent, #14b8a6, transparent); --ui-btn-primary: linear-gradient(135deg, #14b8a6, #0d9488); /* Rollen */ --ui-role-admin: #ef4444; --ui-role-editor: #3b82f6; --ui-role-viewer: #64748b; /* Typografie */ --ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --ui-font-mono: ui-monospace, 'Menlo', 'Consolas', monospace; /* Abstände */ --ui-space-xs: 4px; --ui-space-sm: 8px; --ui-space-md: 12px; --ui-space-lg: 16px; --ui-space-xl: 24px; --ui-space-2xl: 32px; /* Radien */ --ui-radius-sm: 6px; --ui-radius-md: 8px; --ui-radius-lg: 12px; --ui-radius-xl: 14px; /* Schatten */ --ui-shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --ui-shadow-md: 0 4px 12px rgba(0,0,0,0.4); --ui-shadow-lg: 0 8px 24px rgba(0,0,0,0.5); /* Select-Chevron */ --ui-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } /* ─── Light Theme ─────────────────────────────────────────── */ [data-theme="light"] { color-scheme: light; --ui-bg: #f8fafc; --ui-bg-app: #f1f5f9; --ui-bg-card: rgba(0,0,0,0.02); --ui-bg-card-hover: rgba(20,184,166,0.05); --ui-input-bg: #ffffff; --ui-modal-bg: #ffffff; --ui-header-bg: rgba(248,250,252,0.9); --ui-norm-bg: rgba(239,246,255,0.9); --ui-border: rgba(0,0,0,0.08); --ui-border-input: rgba(0,0,0,0.15); --ui-border-focus: rgba(20,184,166,0.5); --ui-text: #0f172a; --ui-text-secondary: #475569; --ui-text-muted: #64748b; --ui-text-dim: #64748b; /* ADR-0031: war #94a3b8 (2,4:1) */ --ui-placeholder: #64748b; /* ADR-0031: war #94a3b8 (2,6:1) */ --ui-accent: #0d9488; --ui-accent-dark: #0f766e; --ui-accent-bg: rgba(20,184,166,0.08); --ui-accent-border: rgba(20,184,166,0.2); --ui-primary: #0d9488; --ui-primary-hover: #14b8a6; --ui-primary-dark: #0f766e; --ui-danger-bg: rgba(239,68,68,0.06); --ui-danger-border: rgba(239,68,68,0.2); --ui-danger-light: #dc2626; /* Akzent-Lights — Light-Theme-Override fuer AA-Kontrast (ADR-0031) */ --ui-primary-light: #0d9488; /* war #5eead4 (~2,5:1 auf Light-BG) */ --ui-purple: #6d28d9; /* war #8b5cf6 (~3,8:1) */ --ui-purple-light: #6d28d9; /* war #c4b5fd (~2,1:1) */ --ui-purple-bg: rgba(139,92,246,0.08); --ui-purple-border: rgba(139,92,246,0.25); --ui-warning-bright: #b45309; /* war #fbbf24 (~2,3:1) */ /* Indigo-/Gray-/Custom — Light-Theme-Werte fuer AA-Kontrast (ADR-0031 Phase 1b) */ --ui-indigo: #4338ca; /* war #6366f1 (~3,5:1 auf Light-BG) */ --ui-indigo-light: #6366f1; /* war #818cf8 (~2,8:1) */ --ui-indigo-soft: #818cf8; /* war #a5b4fc (~2,1:1) */ --ui-gray: #4b5563; /* war #6b7280 — eine Stufe dunkler */ --ui-gray-soft: #6b7280; /* war #9ca3af (~2,8:1) */ --ui-gray-deep: #1f2937; /* war #374151 — sehr dunkel, OK */ --ui-danger-soft: #ef4444; /* war #fca5a5 (~2,4:1) — auf Danger gefallen */ --ui-success-deep: #15803d; /* war #16a34a (~3,8:1) */ --ui-success-light: #16a34a; /* war #34d399 (~2,4:1) */ --ui-bg-tinted: #e2e8f0; /* war #f1f5f9 — minimaler Tint */ --ui-bg-deep: #1a1a2e; /* bleibt dunkel */ --ui-gradient-bg: radial-gradient(ellipse 60% 50% at 25% 50%, rgba(20,184,166,0.06) 0%, transparent 70%); --ui-deco-line: linear-gradient(to bottom, transparent, #5eead4, transparent); --ui-btn-primary: linear-gradient(135deg, #0d9488, #0f766e); --ui-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --ui-shadow-md: 0 4px 12px rgba(0,0,0,0.08); --ui-shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --ui-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } /* ─── Base Reset ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--ui-font); font-weight: 400; /* ADR-0031: war 300 — Lesbarkeit bei kleiner Schrift */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; background: var(--ui-bg-app); color: var(--ui-text); } a { color: inherit; text-decoration: none; } /* ─── Native Form-Controls an Theme koppeln ─────────────────── Native