/* =========================================== myLangSite DESIGN TOKENS — CANONICAL FILE v2 WP5 Clean Architecture (2026-06-03) Part A (Legacy System A) komplett entfernt. Nur noch Part B (Premium System). TIERS: B1 Brand Navy Scale --color-50..900 (10 Hex) B2 Neutral Scale --neutral-0..900 (11 Hex) B3 Semantic Status success/warning/danger/info (13 Hex) B4 Calendar Exception --cal-* (10 Hex) B5 Typography font-family, sizes, weights B6 Spacing --space-1..9, --gap-* B7 Borders & Radius --radius-*, --border-thin B8 Shadows & Overlay --shadow-*, --bg-overlay, card B9 Focus Ring --focus-ring B10 Transitions & Motion --duration-*, --easing-* B11 Z-Index vollständige Layer-Map B12 Layout container, grid, nav-height B13 Semantic Aliases bg/text/border/accent (var() refs — 0 neue Hex) B14 Component Bridge --color-primary/* (var() refs) B15 Special Tokens rose, warn, dark-*, pink-* B16 Compat Aliases --sp-*, --font, --shadow, --radius, --transition, --red B17 Banner Tokens aliasiert auf B3 — 0 neue Hex EXTERNE OVERRIDES (wirken nach dieser Datei): - combined-all.css inline :root → Flat-App-Design (radius, spacing, transitions) - css/theme.css → Navy/Green Theme-Bridge (gray-* Aliases) MIGRATION MAP (Legacy A → Premium B) für CSS-Schritte [3/8]–[7/8]: --gray-* → --neutral-* --color-green-* → --success-bg / --success-text / --success-border / --success-hover --color-blue-primary → --accent --color-blue-light → --info-bg --color-blue-dark → --accent-hover --color-blue-text → --info-text --color-blue-cyan → --cal-panel-booked --color-yellow-warning → --warning-border --color-yellow-light → --warning-bg --color-yellow-dark → --warning-text --color-yellow-amber → --cal-panel-timeout --color-red-danger → --danger-text --color-red-light/pale → --danger-bg --color-red-dark/darker → --danger-text --color-red-border → --danger-border --color-purple-* → --cal-personal-bg / --cal-personal-text --color-calendar-* → --cal-available / --cal-booked / --cal-timeout / --cal-blocked / --cal-personal --cell-* → --cal-* --panel-* → --cal-panel-* --heading-dark → --color-900 --text-ui → --text-secondary --border-mid → --neutral-300 --surface-dark-1 → --neutral-800 --color-white → --neutral-0 --color-black → --color-900 --color-milk → --neutral-50 --color-emerald → --success-hover --color-blue-action → --accent --color-blue-action-dark→ --accent-hover --chat-badge-bg → --danger-text --action-waiting-bg → --warning-text --action-incoming-bg → --accent --favorite-bg → --color-rose --favorite-bg-hover → --color-rose-dark --success-chip-accent → --success-border --action-hover-bg → --success-bg --color-amber → --warn --color-amber-dark → --warn --warning-text → --danger-text (ACHTUNG: Name ≠ Semantik!) --amber-text → --warn-tx --amount-negative → --danger-text --text-slate-* → --color-900 / --text-primary / --text-muted --color-magnetic-gray → --color-900 --btn-primary-bg → --accent --btn-primary-hover → --accent-hover --btn-danger-bg → --danger-text --heading-dark → --color-900 --text-link → --accent --text-success → --success-text --text-warning → --warning-text --text-danger → --danger-text Konsolidierung: 2026-06-03 (WP5 [2/8]) Ursprung: premium-design-tokens.css v1 (1-core-variables + 2-semantic-tokens + premium) =========================================== */ :root { /* ───────────────────────────────────────── B1. BRAND COLOR SCALE (navy #060f1c) 10 Hex-Werte ───────────────────────────────────────── */ --color-50: #f3f5fb; --color-100: #e5eaf5; --color-200: #c8d3ec; --color-300: #99b0db; --color-400: #5b87cc; /* Accent */ --color-500: #2a5fa8; --color-600: #1a3e73; --color-700: #102449; --color-800: #0a1830; --color-900: #060f1c; /* Primary Brand Color */ /* ───────────────────────────────────────── B2. NEUTRAL SCALE 11 Hex-Werte ───────────────────────────────────────── */ --neutral-0: #ffffff; --neutral-50: #f8f9fa; --neutral-100: #f1f3f5; --neutral-200: #e9ecef; --neutral-300: #dee2e6; --neutral-400: #ced4da; --neutral-500: #adb5bd; --neutral-600: #868e96; --neutral-700: #495057; --neutral-800: #343a40; --neutral-900: #212529; /* ───────────────────────────────────────── B3. SEMANTIC STATUS COLORS 4 States × 3–4 Werte = 13 Hex-Werte ───────────────────────────────────────── */ --success: #047857; --success-bg: #ecfdf3; --success-text: var(--success); --success-border: #a7f3d0; --success-hover: #065f46; --warning-bg: #fffbeb; --warning-text: #92400e; --warning-border: #fde68a; --danger-bg: #fef2f2; --danger-text: #b91c1c; --danger-border: #fecaca; --info-bg: #eff6ff; --info-text: #1d4ed8; --info-border: #bfdbfe; /* ───────────────────────────────────────── B4. CALENDAR EXCEPTION Kalender-Zellzustände: 6 Hex (booked/blocked via var()) Kalender-Panel-Farben: 4 Hex (satte Farben für Panel-BG) ───────────────────────────────────────── */ /* ── Zell-Zustände (helle Hintergründe) ── */ --cal-available-bg: #d4edda; --cal-available-text: #155724; --cal-booked-bg: var(--accent); /* kein neuer Hex */ --cal-booked-text: var(--neutral-0); --cal-timeout-bg: #fff3cd; --cal-timeout-text: #856404; --cal-blocked-bg: var(--neutral-200); /* kein neuer Hex */ --cal-blocked-text: var(--neutral-700); --cal-personal-bg: #e1bee7; --cal-personal-text: #4a148c; /* ── Panel-Farben (satte Farben für Drag-Panels) ── */ --cal-panel-available: #4CAF50; --cal-panel-booked: #00BCD4; --cal-panel-timeout: #FF9800; --cal-panel-blocked: var(--neutral-400); /* kein neuer Hex */ --cal-panel-personal: #9C27B0; /* ── Calendar-spezifische Border-Radii ── */ --radius-calendar-sm: 6px; --radius-calendar-md: 8px; --radius-calendar-lg: 12px; /* ───────────────────────────────────────── B5. TYPOGRAPHY 4-2 Principle: Max 4 Sizes, Max 2 Weights ───────────────────────────────────────── */ --font-family: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif; --text-display: 48px; --text-heading: 24px; --text-body: 16px; --text-caption: 12px; --leading-display: 56px; --leading-heading: 32px; --leading-body: 24px; --leading-caption: 16px; --weight-regular: 400; --weight-semibold: 600; --letter-spacing-wide: 0.04em; /* Legacy font-weight aliases @deprecated → --weight-regular / --weight-semibold */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Legacy font-size aliases @deprecated → --text-body / --text-caption / --text-heading / --text-display */ --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 16px; --font-size-md: 16px; /* ───────────────────────────────────────── B6. SPACING (8pt Grid) ───────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --space-9: 128px; --gap-inner: var(--space-3); --gap-between: var(--space-5); --gap-section: var(--space-7); /* Legacy spacing aliases @deprecated → --space-1..6 */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* ───────────────────────────────────────── B7. BORDERS & RADIUS ───────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 50%; --border-thin: 1px; --header-height: 64px; /* ───────────────────────────────────────── B8. SHADOWS, OVERLAY & CARD ───────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(6, 15, 28, 0.08); --shadow-md: 0 4px 16px rgba(6, 15, 28, 0.10); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3); --shadow-2xl: 0 25px 80px rgba(0, 0, 0, 0.2); --bg-overlay: rgba(0, 0, 0, 0.6); /* Card hover tokens (components.css, admin-login.css) */ --card-floating-radius: 16px; --card-floating-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); --card-hover-lift: translateY(-2px); --card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); /* ───────────────────────────────────────── B9. FOCUS RING ───────────────────────────────────────── */ --focus-ring: 0 0 0 3px rgba(91, 135, 204, 0.35); /* ───────────────────────────────────────── B10. TRANSITIONS & MOTION ───────────────────────────────────────── */ --duration-fast: 120ms; --duration-base: 200ms; --easing-base: ease; /* Legacy transition aliases @deprecated → --duration-fast / --duration-base */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; /* ───────────────────────────────────────── B11. Z-INDEX LAYERS NIEMALS hardcoded z-index — immer Token. Layer-Bereiche (niedrig → hoch): BASE z-base 1 CALENDAR-PANEL-CONTEXT z-calendar-panel-overlay 5 PANEL z-panel 15 PANEL-DRAGGING z-panel-dragging 20 DROPDOWN z-dropdown 100 STICKY (generic) z-sticky 200 MODAL-BACKDROP z-modal-backdrop 400 MODAL z-modal 500 TOOLTIP z-tooltip 600 OVERLAY (legacy) z-overlay 999 CALENDAR-STICKY-COL z-calendar-sticky-column 998 CALENDAR-STICKY-CELL z-calendar-sticky-cell 999 CALENDAR-STICKY-HEADER z-calendar-sticky-header 1000 CALENDAR-STICKY-CORNER z-calendar-sticky-corner 1001 Neue Layer immer aus den 100er-Bereichen wählen. 998–1001 ist Calendar-Sticky reserviert. Wichtig: z-calendar-panel-overlay (5) muss unter z-calendar-sticky-header (1000) bleiben, damit Panels beim Scrollen niemals den Wochen-Header überlappen. ───────────────────────────────────────── */ --z-base: 1; --z-panel: 15; --z-panel-dragging: 20; --z-dropdown: 100; --z-sticky: 200; --z-modal-backdrop: 400; --z-modal: 500; --z-tooltip: 600; --z-overlay: 999; /* Calendar Sticky-Hierarchie (reserviert 998–1001) */ --z-calendar-panel-overlay: 5; --z-calendar-sticky-column: 998; --z-calendar-sticky-cell: 999; --z-calendar-sticky-header: 1000; --z-calendar-sticky-corner: 1001; /* ───────────────────────────────────────── B12. LAYOUT ───────────────────────────────────────── */ --container-max-width: 1280px; --grid-columns: 12; --grid-gap: var(--space-4); --nav-height: 70px; /* navbar.css: height: 70px */ /* ───────────────────────────────────────── B13. SEMANTIC ALIASES Keine neuen Hex-Werte — nur var()-Verweise ───────────────────────────────────────── */ --bg-base: var(--neutral-50); /* #f8f9fa — Seiten-Hintergrund (früher #F8DE00, bereinigt S109) */ --bg-surface: var(--neutral-0); /* #ffffff — Karten, Modals, App-Pages */ --bg-subtle: var(--neutral-100); /* #f1f3f5 — Hover, Inputs */ --text-primary: var(--color-900); --text-secondary: var(--neutral-700); --text-muted: var(--neutral-500); --text-disabled: var(--neutral-400); --text-inverse: var(--neutral-0); --border-default: var(--neutral-200); --border-subtle: var(--neutral-100); --border-strong: var(--neutral-300); --accent: var(--color-400); --accent-hover: var(--color-500); --accent-active: var(--color-600); /* ───────────────────────────────────────── B14. COMPONENT BRIDGE Premium pages use blue accent as primary. ───────────────────────────────────────── */ --color-primary: var(--accent); --color-primary-dark: var(--accent-hover); --color-bg-primary: var(--bg-surface); --color-bg-secondary: var(--neutral-50); --color-bg-hover: var(--bg-subtle); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-border: var(--border-default); --color-success: var(--success-text); --color-error: var(--danger-text); --color-error-dark: var(--danger-text); --color-warning: var(--warning-border); --color-info: var(--accent); /* ───────────────────────────────────────── B15. SPECIAL TOKENS Begründet behalten — benannte Use-Cases ───────────────────────────────────────── */ /* Favorites-Button (profile-new.css) */ --color-rose: #f43f5e; --color-rose-dark: #e11d48; /* Wallet pending-balance (navbar.css, payment-ui.css) */ --warn: #f59e0b; --warn-bg: #fef9ec; --warn-tx: #7a5c00; --warn-bd: var(--warning-border); /* #fde68a — Single Source */ /* Dark-Mode Spezifics (dark-mode drawer, avatar, calendar thead) */ --dark-active-bg: #1e2a3a; --dark-active-fg: #7fb0d8; --dark-avatar-bg: #1e3a52; --dark-avatar-fg: #cfe0f0; --dark-surface-navy: #1a2233; /* Pink — reserviert für "Buchung bei anderem Lehrer" (Student-Calendar) R12 (2026-06-03, WP-1): Tokens definiert, aktuell noch nicht in CSS verwendet. Reserviert für kommendes Student-Calendar "Other-Teacher"-Feature. NICHT entfernen — Roadmap-relevant. */ --pink-100: #fce7f3; --pink-400: #ec4899; --pink-600: #be185d; --pink-700: #9d174d; /* ───────────────────────────────────────── B16. COMPAT ALIASES (HTML-Projekt ↔ myLangSite) ───────────────────────────────────────── */ /* Spacing-Aliases: --sp-N (HTML) → --space-N (myLangSite) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 128px; /* Font-Alias */ --font: var(--font-family); /* Layout-Aliases */ --container-pad: 32px; --container-max: 1280px; /* Shadow-Aliases */ --shadow: 0 1px 3px rgba(6, 15, 28, 0.08); --shadow-lg: 0 4px 16px rgba(6, 15, 28, 0.12); /* Radius-Alias */ --radius: var(--radius-md); /* Transition-Alias */ --transition: 150ms ease; /* Red — direkter Farbwert (Compat) */ --red: #dc2626; /* ───────────────────────────────────────── B17. BANNER TOKENS Aliasiert auf B3 Semantic — 0 neue Hex-Werte ───────────────────────────────────────── */ --banner-padding: 12px 16px; --banner-radius: 8px; --banner-gap: 12px; --banner-border-width: 1px; --banner-info-bg: var(--info-bg); --banner-info-border: var(--info-border); --banner-info-text: var(--info-text); --banner-warn-bg: var(--warning-bg); --banner-warn-border: var(--warning-border); --banner-warn-text: var(--warning-text); --banner-success-bg: var(--success-bg); --banner-success-border: var(--success-border); --banner-success-text: var(--success-text); --banner-error-bg: var(--danger-bg); --banner-error-border: var(--danger-border); --banner-error-text: var(--danger-text); } /* =========================================== DARK MODE =========================================== */ @media (prefers-color-scheme: dark) { :root { --bg-base: #0a0e1a; --bg-surface: #111827; --bg-subtle: #1f2937; --text-primary: #f9fafb; --text-secondary: #d1d5db; --text-muted: #9ca3af; --text-disabled: #6b7280; --border-default: #1f2937; --border-strong: #374151; --border-subtle: #1f2937; /* Brand-Tints dunkler */ --color-50: #14213d; --color-100: #1a2a4d; --color-200: #243d6a; /* Status colors: dark translucent fills */ --success: #10b981; --success-bg: rgba(6, 78, 59, 0.5); --success-text: #6ee7b7; --success-border: rgba(16, 185, 129, 0.45); --success-hover: #34d399; --warning-bg: rgba(120, 53, 15, 0.45); --warning-text: #fcd34d; --warning-border: rgba(245, 158, 11, 0.45); --danger-bg: rgba(127, 29, 29, 0.45); --danger-text: #fca5a5; --danger-border: rgba(239, 68, 68, 0.45); --info-bg: rgba(30, 58, 138, 0.45); --info-text: #93c5fd; --info-border: rgba(59, 130, 246, 0.45); --color-bg-secondary: var(--bg-subtle); } }