/* ============================================================ Theme: Praesentation – „Wohnzimmer-Atmosphäre" Warm und einladend, für die Outreach-Präsentations-Route. Light: Cream/Beige + tiefes Türkis (#0F766E) + Terra-Akzent. Dark: Espresso + Mint-Türkis (#2DD4BF) + Gold-Akzent. Hinweis: Generiert über node_modules/preline/skills/theme-generator und am Ende der Light/Dark-Blöcke mit konkreten Hex-Werten nachjustiert, damit die warme Stimmung exakt trifft. ============================================================ */ @theme theme-praesentation inline { /* Brand palette (soft) */ --color-praesentation-50: oklch(92.8% 0.012 175); --color-praesentation-100: oklch(88.6% 0.02 175); --color-praesentation-200: oklch(80.4% 0.035 175); --color-praesentation-300: oklch(72.4% 0.055 175); --color-praesentation-400: oklch(64.6% 0.075 175); --color-praesentation-500: oklch(57% 0.085 175); --color-praesentation-600: oklch(49.6% 0.08 175); --color-praesentation-700: oklch(42.4% 0.07 175); --color-praesentation-800: oklch(35.4% 0.055 175); --color-praesentation-900: oklch(28.6% 0.04 175); --color-praesentation-950: oklch(25.3% 0.03 175); /* Gray palette */ --color-praesentation-gray-50: oklch(98% 0.002 175); --color-praesentation-gray-100: oklch(95.5% 0.004 175); --color-praesentation-gray-200: oklch(89.7% 0.008 175); --color-praesentation-gray-300: oklch(82.7% 0.012 175); --color-praesentation-gray-400: oklch(73% 0.018 175); --color-praesentation-gray-500: oklch(62.5% 0.02 175); --color-praesentation-gray-600: oklch(52.8% 0.016 175); --color-praesentation-gray-700: oklch(41.4% 0.012 175); --color-praesentation-gray-800: oklch(26.9% 0.006 175); --color-praesentation-gray-900: oklch(20.5% 0.004 175); --color-praesentation-gray-950: oklch(14.1% 0.002 175); } :root[data-theme="theme-praesentation"], [data-theme="theme-praesentation"] { /* ============================================ */ /* GLOBAL SURFACES + TEXT */ /* ============================================ */ --background: var(--color-white); --background-1: var(--color-praesentation-gray-50); --background-2: var(--color-praesentation-gray-100); --background-plain: var(--color-white); --foreground: var(--color-praesentation-gray-800); --foreground-inverse: var(--color-white); --inverse: var(--color-primary-950); /* ============================================ */ /* BORDERS (Full Scale) */ /* ============================================ */ --border: var(--color-praesentation-gray-200); --border-line-inverse: var(--color-white); --border-line-1: var(--color-praesentation-gray-100); --border-line-2: var(--color-praesentation-gray-200); --border-line-3: var(--color-praesentation-gray-300); --border-line-4: var(--color-praesentation-gray-400); --border-line-5: var(--color-praesentation-gray-500); --border-line-6: var(--color-praesentation-gray-600); --border-line-7: var(--color-praesentation-gray-700); --border-line-8: var(--color-praesentation-gray-800); /* ============================================ */ /* PRIMARY RAMP (Full 11-shade scale) */ /* ============================================ */ --primary-50: var(--color-praesentation-50); --primary-100: var(--color-praesentation-100); --primary-200: var(--color-praesentation-200); --primary-300: var(--color-praesentation-300); --primary-400: var(--color-praesentation-400); --primary-500: var(--color-praesentation-500); --primary-600: var(--color-praesentation-600); --primary-700: var(--color-praesentation-700); --primary-800: var(--color-praesentation-800); --primary-900: var(--color-praesentation-900); --primary-950: var(--color-praesentation-950); /* PRIMARY STATES */ --primary: var(--color-primary-600); --primary-line: transparent; --primary-foreground: var(--color-white); --primary-hover: var(--color-primary-700); --primary-focus: var(--color-primary-700); --primary-active: var(--color-primary-700); --primary-checked: var(--color-primary-600); /* ============================================ */ /* SECONDARY */ /* ============================================ */ --secondary: var(--color-praesentation-gray-900); --secondary-line: transparent; --secondary-foreground: var(--color-white); --secondary-hover: var(--color-praesentation-gray-800); --secondary-focus: var(--color-praesentation-gray-800); --secondary-active: var(--color-praesentation-gray-800); /* ============================================ */ /* LAYER */ /* ============================================ */ --layer: var(--background-plain); --layer-line: var(--border); --layer-foreground: var(--foreground); --layer-hover: var(--background-1); --layer-focus: var(--background-1); --layer-active: var(--background-1); /* ============================================ */ /* SURFACE */ /* ============================================ */ --surface: var(--color-praesentation-gray-100); --surface-1: var(--color-praesentation-gray-200); --surface-2: var(--color-praesentation-gray-300); --surface-3: var(--color-praesentation-gray-400); --surface-4: var(--color-praesentation-gray-500); --surface-5: var(--color-praesentation-gray-600); --surface-line: transparent; --surface-foreground: var(--color-praesentation-gray-800); --surface-hover: var(--color-praesentation-gray-200); --surface-focus: var(--color-praesentation-gray-200); --surface-active: var(--color-praesentation-gray-200); /* ============================================ */ /* MUTED */ /* ============================================ */ --muted: var(--color-praesentation-gray-50); --muted-foreground: var(--color-praesentation-gray-500); --muted-foreground-1: var(--color-praesentation-gray-600); --muted-foreground-2: var(--color-praesentation-gray-700); --muted-hover: var(--color-praesentation-gray-100); --muted-focus: var(--color-praesentation-gray-100); --muted-active: var(--color-praesentation-gray-100); /* ============================================ */ /* DESTRUCTIVE */ /* ============================================ */ --destructive: var(--color-red-500); --destructive-foreground: var(--color-white); --destructive-hover: var(--color-red-600); --destructive-focus: var(--color-red-600); /* ============================================ */ /* NAVBAR */ /* ============================================ */ --navbar: var(--background-plain); --navbar-line: var(--border); --navbar-divider: var(--border); --navbar-nav-foreground: var(--foreground); --navbar-nav-hover: var(--muted-hover); --navbar-nav-focus: var(--muted-hover); --navbar-nav-active: var(--muted-hover); --navbar-nav-list-divider: var(--border); --navbar-inverse: var(--inverse); --navbar-1: var(--background-1); --navbar-1-line: var(--border); --navbar-1-divider: var(--border); --navbar-1-nav-foreground: var(--foreground); --navbar-1-nav-hover: var(--surface-1); --navbar-1-nav-focus: var(--surface-1); --navbar-1-nav-active: var(--surface-1); --navbar-1-nav-list-divider: var(--border); --navbar-2: var(--background-2); --navbar-2-line: transparent; --navbar-2-divider: var(--border-line-3); --navbar-2-nav-foreground: var(--foreground); --navbar-2-nav-hover: var(--surface-1); --navbar-2-nav-focus: var(--surface-1); --navbar-2-nav-active: var(--surface-1); --navbar-2-nav-list-divider: var(--border); /* ============================================ */ /* SIDEBAR */ /* ============================================ */ --sidebar: var(--background-plain); --sidebar-line: var(--border); --sidebar-divider: var(--border); --sidebar-nav-foreground: var(--foreground); --sidebar-nav-hover: var(--muted-hover); --sidebar-nav-focus: var(--muted-hover); --sidebar-nav-active: var(--muted-hover); --sidebar-nav-list-divider: var(--border); --sidebar-inverse: var(--inverse); --sidebar-1: var(--background-1); --sidebar-1-line: var(--border); --sidebar-1-divider: var(--border); --sidebar-1-nav-foreground: var(--foreground); --sidebar-1-nav-hover: var(--surface-1); --sidebar-1-nav-focus: var(--surface-1); --sidebar-1-nav-active: var(--surface-1); --sidebar-1-nav-list-divider: var(--border); --sidebar-2: var(--background-2); --sidebar-2-line: transparent; --sidebar-2-divider: var(--border); --sidebar-2-nav-foreground: var(--foreground); --sidebar-2-nav-hover: var(--surface-1); --sidebar-2-nav-focus: var(--surface-1); --sidebar-2-nav-active: var(--surface-1); --sidebar-2-nav-list-divider: var(--border); /* ============================================ */ /* CARD */ /* ============================================ */ --card: var(--background-plain); --card-line: var(--border); --card-divider: var(--border); --card-header: var(--background-2); --card-footer: var(--background-2); --card-inverse: var(--inverse); /* ============================================ */ /* DROPDOWN */ /* ============================================ */ --dropdown: var(--background-plain); --dropdown-1: var(--background-plain); --dropdown-line: transparent; --dropdown-divider: var(--border); --dropdown-header: var(--background-2); --dropdown-footer: var(--background-2); --dropdown-item-foreground: var(--foreground); --dropdown-item-hover: var(--muted-hover); --dropdown-item-focus: var(--muted-hover); --dropdown-item-active: var(--muted-hover); --dropdown-inverse: var(--inverse); /* ============================================ */ /* SELECT */ /* ============================================ */ --select: var(--background-plain); --select-1: var(--background-plain); --select-line: transparent; --select-item-foreground: var(--foreground); --select-item-hover: var(--muted-hover); --select-item-focus: var(--muted-hover); --select-item-active: var(--muted-hover); --select-inverse: var(--inverse); /* ============================================ */ /* OVERLAY */ /* ============================================ */ --overlay: var(--background-plain); --overlay-line: transparent; --overlay-divider: var(--border); --overlay-header: var(--background-2); --overlay-footer: var(--background-2); --overlay-inverse: var(--inverse); /* ============================================ */ /* POPOVER */ /* ============================================ */ --popover: var(--background-plain); --popover-line: var(--border-line-1); /* ============================================ */ /* TOOLTIP */ /* ============================================ */ --tooltip: var(--inverse); --tooltip-foreground: var(--foreground-inverse); --tooltip-line: transparent; /* ============================================ */ /* TABLE */ /* ============================================ */ --table-line: var(--border); /* ============================================ */ /* SWITCH */ /* ============================================ */ --switch: var(--background-plain); /* ============================================ */ /* FOOTER */ /* ============================================ */ --footer: var(--background-plain); --footer-line: var(--border); --footer-inverse: var(--inverse); /* ============================================ */ /* SCROLLBAR */ /* ============================================ */ --scrollbar-track: var(--background-1); --scrollbar-thumb: var(--surface-2); --scrollbar-track-inverse: transparent; --scrollbar-thumb-inverse: var(--foreground-inverse); /* ============================================ */ /* CHARTS (Apexcharts) */ /* ============================================ */ --chart-colors-background: var(--background-plain); --chart-colors-background-inverse: var(--inverse); --chart-colors-chart-inverse: var(--background-1); --chart-colors-foreground: var(--foreground); --chart-colors-foreground-inverse: var(--foreground-inverse); --chart-primary: var(--color-primary-600); --chart-colors-primary: var(--color-primary-600); --chart-colors-primary-inverse: var(--color-primary-300); --chart-colors-primary-hex: var(--color-primary-600); --chart-colors-primary-hex-inverse: var(--color-primary-300); --chart-1: var(--color-primary-50); --chart-colors-chart-1: var(--color-primary-50); --chart-colors-chart-1-inverse: var(--color-primary-100); --chart-colors-chart-1-hex: var(--color-primary-50); --chart-colors-chart-1-hex-inverse: var(--color-primary-100); --chart-2: var(--color-primary-200); --chart-colors-chart-2: var(--color-primary-200); --chart-colors-chart-2-inverse: var(--color-primary-300); --chart-colors-chart-2-hex: var(--color-primary-200); --chart-colors-chart-2-hex-inverse: var(--color-primary-300); --chart-3: var(--color-primary-400); --chart-colors-chart-3: var(--color-primary-400); --chart-colors-chart-3-inverse: var(--color-primary-500); --chart-colors-chart-3-hex: var(--color-primary-400); --chart-colors-chart-3-hex-inverse: var(--color-primary-500); --chart-4: var(--color-primary-700); --chart-colors-chart-4: var(--color-primary-700); --chart-colors-chart-4-inverse: var(--color-primary-500); --chart-colors-chart-4-hex: var(--color-primary-700); --chart-colors-chart-4-hex-inverse: var(--color-primary-500); --chart-5: var(--color-primary-900); --chart-colors-chart-5: var(--color-primary-900); --chart-colors-chart-5-inverse: var(--color-primary-700); --chart-colors-chart-5-hex: var(--color-primary-900); --chart-colors-chart-5-hex-inverse: var(--color-primary-700); --chart-6: var(--color-sky-600); --chart-colors-chart-6: var(--color-sky-600); --chart-colors-chart-6-inverse: var(--color-sky-400); --chart-colors-chart-6-hex: var(--color-sky-600); --chart-colors-chart-6-hex-inverse: var(--color-sky-400); --chart-7: var(--color-emerald-600); --chart-colors-chart-7: var(--color-emerald-600); --chart-colors-chart-7-inverse: var(--color-emerald-400); --chart-colors-chart-7-hex: var(--color-emerald-600); --chart-colors-chart-7-hex-inverse: var(--color-emerald-400); --chart-8: var(--color-violet-600); --chart-colors-chart-8: var(--color-violet-600); --chart-colors-chart-8-inverse: var(--color-violet-400); --chart-colors-chart-8-hex: var(--color-violet-600); --chart-colors-chart-8-hex-inverse: var(--color-violet-400); --chart-9: var(--color-rose-500); --chart-colors-chart-9: var(--color-rose-500); --chart-colors-chart-9-inverse: var(--color-rose-300); --chart-colors-chart-9-hex: var(--color-rose-500); --chart-colors-chart-9-hex-inverse: var(--color-rose-300); --chart-10: var(--color-praesentation-gray-300); --chart-colors-chart-10: var(--color-praesentation-gray-300); --chart-colors-chart-10-inverse: var(--color-praesentation-gray-500); --chart-colors-chart-10-hex: var(--color-praesentation-gray-300); --chart-colors-chart-10-hex-inverse: var(--color-praesentation-gray-500); --chart-colors-candlestick-upward: var(--color-green-500); --chart-colors-candlestick-upward-inverse: var(--color-green-400); --chart-colors-candlestick-downward: var(--color-red-500); --chart-colors-candlestick-downward-inverse: var(--color-red-400); --chart-colors-labels: var(--color-praesentation-gray-600); --chart-colors-labels-inverse: var(--color-praesentation-gray-400); --chart-colors-xaxis-labels: var(--color-praesentation-gray-500); --chart-colors-xaxis-labels-inverse: var(--color-praesentation-gray-400); --chart-colors-yaxis-labels: var(--color-praesentation-gray-500); --chart-colors-yaxis-labels-inverse: var(--color-praesentation-gray-400); --chart-colors-grid-border: var(--border); --chart-colors-grid-border-inverse: var(--color-praesentation-gray-700); --chart-colors-bar-ranges: var(--surface-1); --chart-colors-bar-ranges-inverse: var(--color-praesentation-gray-700); /* ============================================ */ /* MAPS (jsvectormap) */ /* ============================================ */ --map-colors-primary: var(--color-primary-500); --map-colors-primary-inverse: var(--color-primary-300); --map-colors-default: var(--surface-1); --map-colors-default-inverse: var(--color-praesentation-gray-700); --map-colors-highlight: var(--color-primary-300); --map-colors-highlight-inverse: var(--color-primary-500); --map-colors-border: var(--border-line-3); --map-colors-border-inverse: var(--color-praesentation-gray-600); } [data-theme="theme-praesentation"].dark { /* ============================================ */ /* DARK MODE - Custom Gray */ /* ============================================ */ /* BACKGROUNDS */ --background: var(--color-praesentation-gray-800); --background-1: var(--color-praesentation-gray-900); --background-2: var(--color-praesentation-gray-950); --background-plain: var(--color-praesentation-gray-800); /* TEXT */ --foreground: var(--color-praesentation-gray-200); --foreground-inverse: var(--color-white); --inverse: var(--color-praesentation-gray-950); /* BORDERS */ --border: var(--color-praesentation-gray-700); --border-line-inverse: var(--color-praesentation-gray-200); --border-line-1: var(--color-praesentation-gray-800); --border-line-2: var(--color-praesentation-gray-700); --border-line-3: var(--color-praesentation-gray-600); --border-line-4: var(--color-praesentation-gray-500); --border-line-5: var(--color-praesentation-gray-400); --border-line-6: var(--color-praesentation-gray-300); --border-line-7: var(--color-praesentation-gray-200); --border-line-8: var(--color-praesentation-gray-100); /* PRIMARY STATES */ --primary: var(--color-primary-500); --primary-line: transparent; --primary-foreground: var(--color-white); --primary-hover: var(--color-primary-600); --primary-focus: var(--color-primary-600); --primary-active: var(--color-primary-600); --primary-checked: var(--color-primary-500); /* SECONDARY */ --secondary: var(--color-white); --secondary-line: transparent; --secondary-foreground: var(--color-praesentation-gray-800); --secondary-hover: var(--color-praesentation-gray-100); --secondary-focus: var(--color-praesentation-gray-100); --secondary-active: var(--color-praesentation-gray-100); /* LAYER */ --layer: var(--background); --layer-line: var(--border); --layer-foreground: var(--color-white); --layer-hover: var(--color-praesentation-gray-700); --layer-focus: var(--color-praesentation-gray-700); --layer-active: var(--color-praesentation-gray-700); /* SURFACE */ --surface: var(--color-praesentation-gray-700); --surface-1: var(--color-praesentation-gray-600); --surface-2: var(--color-praesentation-gray-500); --surface-3: var(--color-praesentation-gray-600); --surface-4: var(--color-praesentation-gray-500); --surface-5: var(--color-praesentation-gray-400); --surface-line: transparent; --surface-foreground: var(--color-praesentation-gray-200); --surface-hover: var(--color-praesentation-gray-600); --surface-focus: var(--color-praesentation-gray-600); --surface-active: var(--color-praesentation-gray-600); /* MUTED */ --muted: var(--color-praesentation-gray-800); --muted-foreground: var(--color-praesentation-gray-500); --muted-foreground-1: var(--color-praesentation-gray-400); --muted-foreground-2: var(--color-praesentation-gray-300); --muted-hover: var(--color-praesentation-gray-700); --muted-focus: var(--color-praesentation-gray-700); --muted-active: var(--color-praesentation-gray-700); /* DESTRUCTIVE */ --destructive: var(--color-red-500); --destructive-foreground: var(--color-white); --destructive-hover: var(--color-red-600); --destructive-focus: var(--color-red-600); /* NAVBAR */ --navbar: var(--background); --navbar-line: var(--border); --navbar-divider: var(--border); --navbar-nav-foreground: var(--foreground); --navbar-nav-hover: var(--muted-hover); --navbar-nav-focus: var(--muted-hover); --navbar-nav-active: var(--muted-hover); --navbar-nav-list-divider: var(--border); --navbar-inverse: var(--inverse); --navbar-1: var(--background-1); --navbar-1-line: var(--border); --navbar-1-divider: var(--border); --navbar-1-nav-foreground: var(--foreground); --navbar-1-nav-hover: var(--surface); --navbar-1-nav-focus: var(--surface); --navbar-1-nav-active: var(--surface); --navbar-1-nav-list-divider: var(--border); --navbar-2: var(--background-2); --navbar-2-line: transparent; --navbar-2-divider: var(--border); --navbar-2-nav-foreground: var(--foreground); --navbar-2-nav-hover: var(--surface); --navbar-2-nav-focus: var(--surface); --navbar-2-nav-active: var(--surface); --navbar-2-nav-list-divider: var(--border); /* SIDEBAR */ --sidebar: var(--background); --sidebar-line: var(--border); --sidebar-divider: var(--border); --sidebar-nav-foreground: var(--foreground); --sidebar-nav-hover: var(--muted-hover); --sidebar-nav-focus: var(--muted-hover); --sidebar-nav-active: var(--muted-hover); --sidebar-nav-list-divider: var(--border); --sidebar-inverse: var(--inverse); --sidebar-1: var(--background-1); --sidebar-1-line: var(--border); --sidebar-1-divider: var(--border); --sidebar-1-nav-foreground: var(--foreground); --sidebar-1-nav-hover: var(--surface); --sidebar-1-nav-focus: var(--surface); --sidebar-1-nav-active: var(--surface); --sidebar-1-nav-list-divider: var(--border); --sidebar-2: var(--background-2); --sidebar-2-line: transparent; --sidebar-2-divider: var(--border); --sidebar-2-nav-foreground: var(--foreground); --sidebar-2-nav-hover: var(--surface); --sidebar-2-nav-focus: var(--surface); --sidebar-2-nav-active: var(--surface); --sidebar-2-nav-list-divider: var(--border); /* CARD */ --card: var(--background); --card-line: var(--border); --card-divider: var(--border); --card-header: var(--surface); --card-footer: var(--surface); --card-inverse: var(--inverse); /* DROPDOWN */ --dropdown: var(--background-1); --dropdown-1: var(--background-2); --dropdown-line: transparent; --dropdown-divider: var(--border); --dropdown-header: var(--surface); --dropdown-footer: var(--surface); --dropdown-item-foreground: var(--foreground); --dropdown-item-hover: var(--muted-hover); --dropdown-item-focus: var(--muted-hover); --dropdown-item-active: var(--muted-hover); --dropdown-inverse: var(--inverse); /* SELECT */ --select: var(--background-1); --select-1: var(--background-2); --select-line: transparent; --select-item-foreground: var(--foreground); --select-item-hover: var(--muted-hover); --select-item-focus: var(--muted-hover); --select-item-active: var(--muted-hover); --select-inverse: var(--inverse); /* OVERLAY */ --overlay: var(--background); --overlay-line: transparent; --overlay-divider: var(--border); --overlay-header: var(--surface); --overlay-footer: var(--surface); --overlay-inverse: var(--inverse); /* POPOVER */ --popover: var(--background-1); --popover-line: var(--border); /* TOOLTIP */ --tooltip: var(--color-white); --tooltip-foreground: var(--color-praesentation-gray-800); --tooltip-line: transparent; /* TABLE */ --table-line: var(--border); /* SWITCH */ --switch: var(--color-white); /* FOOTER */ --footer: var(--background); --footer-line: var(--border); --footer-inverse: var(--inverse); /* SCROLLBAR */ --scrollbar-track: var(--surface); --scrollbar-thumb: var(--surface-3); --scrollbar-track-inverse: var(--surface-4); --scrollbar-thumb-inverse: var(--surface-2); /* CHARTS - dark mode adjustments */ --chart-colors-background: var(--background); --chart-colors-background-inverse: var(--color-praesentation-gray-100); --chart-colors-chart-inverse: var(--background-1); --chart-colors-foreground: var(--color-praesentation-gray-300); --chart-colors-foreground-inverse: var(--color-white); --chart-primary: var(--color-primary-500); --chart-colors-primary: var(--color-primary-500); --chart-colors-primary-inverse: var(--color-primary-300); --chart-colors-primary-hex: var(--color-primary-500); --chart-colors-primary-hex-inverse: var(--color-primary-300); --chart-1: var(--color-primary-200); --chart-colors-chart-1: var(--color-primary-200); --chart-colors-chart-1-inverse: var(--color-primary-300); --chart-colors-chart-1-hex: var(--color-primary-200); --chart-colors-chart-1-hex-inverse: var(--color-primary-300); --chart-2: var(--color-primary-300); --chart-colors-chart-2: var(--color-primary-300); --chart-colors-chart-2-inverse: var(--color-primary-400); --chart-colors-chart-2-hex: var(--color-primary-300); --chart-colors-chart-2-hex-inverse: var(--color-primary-400); --chart-3: var(--color-primary-400); --chart-colors-chart-3: var(--color-primary-400); --chart-colors-chart-3-inverse: var(--color-primary-500); --chart-colors-chart-3-hex: var(--color-primary-400); --chart-colors-chart-3-hex-inverse: var(--color-primary-500); --chart-4: var(--color-primary-500); --chart-colors-chart-4: var(--color-primary-500); --chart-colors-chart-4-inverse: var(--color-primary-600); --chart-colors-chart-4-hex: var(--color-primary-500); --chart-colors-chart-4-hex-inverse: var(--color-primary-600); --chart-5: var(--color-primary-300); --chart-colors-chart-5: var(--color-primary-300); --chart-colors-chart-5-inverse: var(--color-primary-500); --chart-colors-chart-5-hex: var(--color-primary-300); --chart-colors-chart-5-hex-inverse: var(--color-primary-500); --chart-6: var(--color-sky-400); --chart-colors-chart-6: var(--color-sky-400); --chart-colors-chart-6-inverse: var(--color-sky-300); --chart-colors-chart-6-hex: var(--color-sky-400); --chart-colors-chart-6-hex-inverse: var(--color-sky-300); --chart-7: var(--color-emerald-400); --chart-colors-chart-7: var(--color-emerald-400); --chart-colors-chart-7-inverse: var(--color-emerald-300); --chart-colors-chart-7-hex: var(--color-emerald-400); --chart-colors-chart-7-hex-inverse: var(--color-emerald-300); --chart-8: var(--color-violet-400); --chart-colors-chart-8: var(--color-violet-400); --chart-colors-chart-8-inverse: var(--color-violet-300); --chart-colors-chart-8-hex: var(--color-violet-400); --chart-colors-chart-8-hex-inverse: var(--color-violet-300); --chart-9: var(--color-rose-400); --chart-colors-chart-9: var(--color-rose-400); --chart-colors-chart-9-inverse: var(--color-rose-300); --chart-colors-chart-9-hex: var(--color-rose-400); --chart-colors-chart-9-hex-inverse: var(--color-rose-300); --chart-10: var(--color-praesentation-gray-300); --chart-colors-chart-10: var(--color-praesentation-gray-300); --chart-colors-chart-10-inverse: var(--color-praesentation-gray-500); --chart-colors-chart-10-hex: var(--color-praesentation-gray-300); --chart-colors-chart-10-hex-inverse: var(--color-praesentation-gray-500); --chart-colors-labels: var(--color-praesentation-gray-400); --chart-colors-xaxis-labels: var(--color-praesentation-gray-400); --chart-colors-yaxis-labels: var(--color-praesentation-gray-400); --chart-colors-grid-border: var(--border); --chart-colors-bar-ranges: var(--surface); /* MAPS - dark mode adjustments */ --map-colors-default: var(--surface); --map-colors-default-inverse: var(--surface-2); --map-colors-border: var(--border-line-3); --map-colors-border-inverse: var(--border-line-4); } /* ============================================================ ÜBERSCHREIBUNGEN — warme Cream/Espresso-Palette Ergänzt nach Skill-Generierung. Überstimmt die OKLCH-Werte des Generators mit den vom User gewünschten konkreten Cream/Türkis/Terra- bzw. Espresso/Mint/Gold-Tönen. ============================================================ */ :root[data-theme="theme-praesentation"], [data-theme="theme-praesentation"] { /* SURFACES — Cream-Familie */ --background: #FDFAF6; /* Hauptfläche: warmes Cream */ --background-1: #F8F2EA; /* Zweite Ebene: zarter Sand */ --background-2: #F0E6D6; /* Dritte Ebene: kräftiger Sand */ --background-plain: #FFFFFF; /* Cards: reinweiß für Kontrast */ /* TEXT */ --foreground: #292524; /* Warmer Anthrazit */ --foreground-inverse: #FDFAF6; --inverse: #292524; /* BORDERS — gedämpfte Sand-Töne */ --border: #E7DCC9; --border-line-1: #F0E6D6; --border-line-2: #E7DCC9; --border-line-3: #D4C5A9; --border-line-4: #B8A485; /* PRIMARY — tiefes Türkis (#0F766E) */ --primary: #0F766E; --primary-hover: #115E59; --primary-focus: #115E59; --primary-active: #134E4A; --primary-checked: #0F766E; --primary-foreground: #FFFFFF; /* MUTED-FOREGROUND — warme Brauntöne statt grünlich-grau */ --muted-foreground: #78716C; --muted-foreground-1: #57534E; --muted-foreground-2: #44403C; /* CARD: bleibt reinweiß, Border in Sand */ --card: #FFFFFF; --card-line: #E7DCC9; --card-divider: #EDE3D2; --card-header: #F8F2EA; --card-footer: #F8F2EA; /* NAVBAR (Header-Bar): leicht abgesetzt vom Cream */ --navbar: #FFFFFF; --navbar-line: #E7DCC9; /* SURFACE/LAYER für Hover-States */ --surface: #F0E6D6; --surface-1: #E7DCC9; --layer: #FFFFFF; --layer-hover: #F8F2EA; --layer-focus: #F8F2EA; /* AKZENT — Terra/Sand, dekorativ einsetzbar */ --praesentation-akzent: #C2855F; --praesentation-akzent-hover: #A56F4D; } [data-theme="theme-praesentation"].dark { /* SURFACES — Espresso-Familie */ --background: #1C1917; /* Dunkles Espresso */ --background-1: #292524; /* Etwas heller, für Hover/Layer */ --background-2: #1C1917; --background-plain: #292524; /* Cards in dunklerem Espresso */ /* TEXT — warmes Off-White */ --foreground: #FAFAF9; --foreground-inverse: #1C1917; --inverse: #FAFAF9; /* BORDERS — warme Espresso-Töne */ --border: #44403C; --border-line-1: #292524; --border-line-2: #44403C; --border-line-3: #57534E; --border-line-4: #78716C; /* PRIMARY — Mint-Türkis (#2DD4BF), heller im Dark */ --primary: #2DD4BF; --primary-hover: #14B8A6; --primary-focus: #14B8A6; --primary-active: #0D9488; --primary-checked: #2DD4BF; --primary-foreground: #1C1917; /* MUTED-FOREGROUND — gedämpfte warme Stone-Töne */ --muted-foreground: #A8A29E; --muted-foreground-1: #D6D3D1; --muted-foreground-2: #E7E5E4; /* CARD */ --card: #292524; --card-line: #44403C; --card-divider: #3C3631; --card-header: #1C1917; --card-footer: #1C1917; /* NAVBAR */ --navbar: #1C1917; --navbar-line: #44403C; /* SURFACE/LAYER */ --surface: #44403C; --surface-1: #57534E; --layer: #292524; --layer-hover: #44403C; --layer-focus: #44403C; /* AKZENT — Goldgelb */ --praesentation-akzent: #FBBF24; --praesentation-akzent-hover: #F59E0B; }