/* ============================================================================= Design Spine — Design Tokens =========================================================================== Stand: 2026-03-27 Verwendung: Alle Tokens nutzen das Prefix --ds-* (Design Spine). Dark Mode wird automatisch aktiviert durch . =========================================================================== */ /* ============================================================================= 1. FARBEN — Basis-Palette =========================================================================== */ :root, :host { /* --- Neutrals ---------------------------------------------------------- */ --ds-color-black: #000000; --ds-color-black-alpha-02: rgba(0, 0, 0, 0.02); --ds-color-black-alpha-50: rgba(0, 0, 0, 0.5); --ds-color-white: #ffffff; --ds-color-white-alpha-00: rgba(255, 255, 255, 0); --ds-color-white-alpha-05: rgba(255, 255, 255, 0.05); --ds-color-white-alpha-20: rgba(255, 255, 255, 0.2); /* --- Cool Grey (primäre UI-Grautöne) ----------------------------------- */ --ds-color-cool-grey-100: #f2f3f4; --ds-color-cool-grey-100-alpha-10: rgba(242, 243, 244, 0.1); --ds-color-cool-grey-100-alpha-20: rgba(242, 243, 244, 0.2); --ds-color-cool-grey-100-alpha-30: rgba(242, 243, 244, 0.3); --ds-color-cool-grey-200: #dcdee1; --ds-color-cool-grey-200-alpha-20: rgba(220, 222, 225, 0.2); --ds-color-cool-grey-300: #c1c5cb; --ds-color-cool-grey-400: #a2aab4; --ds-color-cool-grey-500: #858d98; --ds-color-cool-grey-600: #69707a; --ds-color-cool-grey-700: #4e545d; --ds-color-cool-grey-700-alpha-20: rgba(78, 84, 93, 0.2); --ds-color-cool-grey-700-alpha-70: rgba(78, 84, 93, 0.7); --ds-color-cool-grey-800: #353a41; --ds-color-cool-grey-800-alpha-10: rgba(53, 58, 65, 0.1); --ds-color-cool-grey-800-alpha-20: rgba(53, 58, 65, 0.2); --ds-color-cool-grey-900: #1f2328; --ds-color-cool-grey-900-alpha-30: rgba(31, 35, 40, 0.3); --ds-color-cool-grey-950: #0b0d10; /* --- Grey (warme Grautöne) --------------------------------------------- */ --ds-color-grey-100: #f5f6f6; --ds-color-grey-100-alpha-10: rgba(245, 246, 246, 0.1); --ds-color-grey-200: #e0e2e3; --ds-color-grey-300: #c6c8cb; --ds-color-grey-400: #a9abaf; --ds-color-grey-500: #8c8e91; --ds-color-grey-600: #707173; --ds-color-grey-700: #555658; --ds-color-grey-800: #3d3e3e; --ds-color-grey-900: #282828; --ds-color-grey-900-alpha-10: rgba(41, 41, 41, 0.1); --ds-color-grey-950: #161616; --ds-color-grey-950-alpha-05: rgba(22, 22, 22, 0.05); /* --- Ocean (Primärfarbe / Action) -------------------------------------- */ --ds-color-ocean-100: #e0f2ff; --ds-color-ocean-200: #a8dfff; --ds-color-ocean-300: #3ccaff; --ds-color-ocean-400: #00aede; --ds-color-ocean-400-alpha-30: rgba(2, 145, 183, 0.3); --ds-color-ocean-500: #0291b7; --ds-color-ocean-500-alpha-30: rgba(2, 145, 183, 0.3); --ds-color-ocean-600: #037493; --ds-color-ocean-700: #035970; --ds-color-ocean-800: #024051; --ds-color-ocean-900: #012935; --ds-color-ocean-950: #00131a; /* --- Blue (Informational) ---------------------------------------------- */ --ds-color-blue-100: #ecf3ff; --ds-color-blue-200: #cbdfff; --ds-color-blue-300: #9ec7ff; --ds-color-blue-400: #62acff; --ds-color-blue-500: #008ff0; --ds-color-blue-600: #0071c5; --ds-color-blue-700: #005499; --ds-color-blue-800: #00396f; --ds-color-blue-900: #002248; --ds-color-blue-950: #000b20; /* --- Green (Positive / Success) ---------------------------------------- */ --ds-color-green-100: #e5fceb; --ds-color-green-200: #9ff7b7; --ds-color-green-300: #6de28f; --ds-color-green-400: #55c474; --ds-color-green-500: #3ea359; --ds-color-green-600: #2a813f; --ds-color-green-700: #185f28; --ds-color-green-800: #084114; --ds-color-green-900: #002704; --ds-color-green-950: #000f01; /* --- Yellow (Caution / Warning) ---------------------------------------- */ --ds-color-yellow-100: #fff7de; --ds-color-yellow-200: #ffe38e; --ds-color-yellow-300: #f6c800; --ds-color-yellow-300-alpha-30: rgba(248, 202, 0, 0.3); --ds-color-yellow-400: #daaa00; --ds-color-yellow-500: #ba8900; --ds-color-yellow-600: #976900; --ds-color-yellow-700: #744b00; --ds-color-yellow-800: #523000; --ds-color-yellow-900: #341a00; --ds-color-yellow-950: #170700; /* --- Red (Critical / Error) -------------------------------------------- */ --ds-color-red-100: #ffefef; --ds-color-red-200: #ffd4d4; --ds-color-red-300: #ffb0b0; --ds-color-red-400: #ff8485; --ds-color-red-500: #ff454a; --ds-color-red-600: #df001a; --ds-color-red-600-alpha-30: rgba(223, 0, 26, 0.3); --ds-color-red-700: #aa0014; --ds-color-red-800: #79010d; --ds-color-red-900: #4b0308; --ds-color-red-950: #200102; /* --- Weitere Akzentfarben ---------------------------------------------- */ --ds-color-gamboge-400: #ec9500; --ds-color-gamboge-600: #9a6300; --ds-color-persimmon-500: #e96200; --ds-color-violet-600: #7547ff; --ds-color-rose-600: #d50075; --ds-color-fuschia-600: #c117b9; --ds-color-jade-600: #007e64; --ds-color-bondiblue-600: #007b8a; --ds-color-viridian-600: #007c78; --ds-color-avocado-600: #517b00; --ds-color-olive-600: #6d7407; --ds-color-heliotrope-600: #b400e6; } /* ============================================================================= 2. SEMANTISCHE FARBEN — Light Mode (Default) =========================================================================== */ :root, :host { /* --- Text / Typografie ------------------------------------------------- */ --ds-color-typography-base: var(--ds-color-cool-grey-800); --ds-color-typography-action: var(--ds-color-ocean-600); --ds-color-typography-action-hover: var(--ds-color-ocean-700); --ds-color-typography-action-active: var(--ds-color-ocean-700); --ds-color-typography-neutral: var(--ds-color-cool-grey-600); --ds-color-typography-placeholder: var(--ds-color-cool-grey-400); --ds-color-typography-disabled: var(--ds-color-cool-grey-900-alpha-30); --ds-color-typography-invert: var(--ds-color-white); --ds-color-typography-critical: var(--ds-color-red-600); --ds-color-typography-caution: var(--ds-color-yellow-600); --ds-color-typography-positive: var(--ds-color-green-600); --ds-color-typography-info: var(--ds-color-blue-600); /* --- Oberflächen ------------------------------------------------------- */ --ds-color-surface-base: var(--ds-color-white); --ds-color-surface-page: var(--ds-color-grey-100); --ds-color-surface-invert: var(--ds-color-cool-grey-900); --ds-color-surface-neutral: var(--ds-color-cool-grey-100); --ds-color-surface-neutral-hover: var(--ds-color-cool-grey-200); --ds-color-surface-neutral-mild: var(--ds-color-cool-grey-200); --ds-color-surface-neutral-medium: var(--ds-color-cool-grey-400); --ds-color-surface-neutral-strong: var(--ds-color-cool-grey-600); --ds-color-surface-action: var(--ds-color-ocean-100); --ds-color-surface-action-hover: var(--ds-color-ocean-200); --ds-color-surface-action-strong: var(--ds-color-ocean-600); --ds-color-surface-action-strong-hover: var(--ds-color-ocean-700); --ds-color-surface-action-strong-active: var(--ds-color-ocean-700); --ds-color-surface-critical: var(--ds-color-red-100); --ds-color-surface-critical-strong: var(--ds-color-red-600); --ds-color-surface-caution: var(--ds-color-yellow-100); --ds-color-surface-caution-strong: var(--ds-color-yellow-300); --ds-color-surface-positive: var(--ds-color-green-100); --ds-color-surface-positive-strong: var(--ds-color-green-600); --ds-color-surface-info: var(--ds-color-blue-100); --ds-color-surface-info-strong: var(--ds-color-blue-600); --ds-color-surface-disabled: var(--ds-color-grey-900-alpha-10); --ds-color-surface-backdrop: var(--ds-color-cool-grey-700-alpha-70); --ds-color-surface-transparent: var(--ds-color-white-alpha-00); /* --- Rahmen / Borders -------------------------------------------------- */ --ds-color-border-base: var(--ds-color-cool-grey-200); --ds-color-border-neutral: var(--ds-color-cool-grey-200); --ds-color-border-neutral-mild: var(--ds-color-cool-grey-300); --ds-color-border-action: var(--ds-color-ocean-200); --ds-color-border-action-strong: var(--ds-color-ocean-700); --ds-color-border-critical: var(--ds-color-red-200); --ds-color-border-critical-strong: var(--ds-color-red-700); --ds-color-border-disabled: var(--ds-color-grey-900-alpha-10); --ds-color-border-transparent: var(--ds-color-white-alpha-00); /* --- Icons ------------------------------------------------------------- */ --ds-color-icon-base: var(--ds-color-cool-grey-800); --ds-color-icon-action: var(--ds-color-ocean-600); --ds-color-icon-action-hover: var(--ds-color-ocean-700); --ds-color-icon-neutral: var(--ds-color-cool-grey-600); --ds-color-icon-critical: var(--ds-color-red-600); --ds-color-icon-positive: var(--ds-color-green-600); --ds-color-icon-info: var(--ds-color-blue-600); --ds-color-icon-caution: var(--ds-color-yellow-600); --ds-color-icon-disabled: var(--ds-color-cool-grey-900-alpha-30); --ds-color-icon-invert: var(--ds-color-white); /* --- Focus / Outline --------------------------------------------------- */ --ds-color-outline-action: var(--ds-color-ocean-500-alpha-30); --ds-color-outline-critical: var(--ds-color-red-600-alpha-30); } /* ============================================================================= 3. TYPOGRAFIE =========================================================================== */ :root, :host { /* --- Font Families ----------------------------------------------------- */ --ds-typography-family-brand: "Times New Roman", Times, serif; --ds-typography-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --ds-typography-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Semantische Zuordnungen */ --ds-typography-family-base: var(--ds-typography-family-system); --ds-typography-family-title: var(--ds-typography-family-brand); --ds-typography-family-label: var(--ds-typography-family-system); --ds-typography-family-paragraph: var(--ds-typography-family-system); --ds-typography-family-code: var(--ds-typography-family-mono); /* --- Font Sizes (Type Scale) ------------------------------------------- */ --ds-typography-size-01: 10px; --ds-typography-size-02: 11px; --ds-typography-size-03: 12px; /* Label */ --ds-typography-size-04: 14px; /* Regular / Body */ --ds-typography-size-05: 16px; /* Paragraph / Title-MD */ --ds-typography-size-06: 18px; --ds-typography-size-07: 20px; --ds-typography-size-08: 23px; /* Title-LG */ --ds-typography-size-09: 26px; --ds-typography-size-10: 29px; /* Title-XL */ --ds-typography-size-11: 33px; --ds-typography-size-12: 37px; --ds-typography-size-13: 42px; --ds-typography-size-14: 47px; --ds-typography-size-15: 53px; --ds-typography-size-16: 59px; /* Semantische Größen */ --ds-typography-size-smallprint: var(--ds-typography-size-01); --ds-typography-size-label: var(--ds-typography-size-03); --ds-typography-size-regular: var(--ds-typography-size-04); --ds-typography-size-paragraph: var(--ds-typography-size-05); --ds-typography-size-title-xs: var(--ds-typography-size-01); --ds-typography-size-title-sm: var(--ds-typography-size-03); --ds-typography-size-title-md: var(--ds-typography-size-05); --ds-typography-size-title-lg: var(--ds-typography-size-08); --ds-typography-size-title-xl: var(--ds-typography-size-10); /* --- Font Weights ------------------------------------------------------ */ --ds-typography-weight-400: 400; --ds-typography-weight-500: 500; --ds-typography-weight-600: 600; --ds-typography-weight-700: 700; --ds-typography-weight-regular: var(--ds-typography-weight-400); --ds-typography-weight-medium: var(--ds-typography-weight-500); --ds-typography-weight-strong: var(--ds-typography-weight-600); /* --- Line Heights ------------------------------------------------------ */ --ds-typography-line-height-xs: var(--ds-space-3x); /* 12px */ --ds-typography-line-height-sm: var(--ds-space-4x); /* 16px */ --ds-typography-line-height-md: var(--ds-space-5x); /* 20px */ --ds-typography-line-height-lg: var(--ds-space-6x); /* 24px */ --ds-typography-line-height-xl: var(--ds-space-9x); /* 36px */ --ds-typography-line-height-smallprint: var(--ds-space-3x); --ds-typography-line-height-label: var(--ds-space-4x); --ds-typography-line-height-regular: var(--ds-space-5x); --ds-typography-line-height-paragraph: var(--ds-space-6x); --ds-typography-line-height-title-xs: var(--ds-space-3x); --ds-typography-line-height-title-sm: var(--ds-space-4x); --ds-typography-line-height-title-md: var(--ds-space-6x); --ds-typography-line-height-title-lg: var(--ds-space-7x); --ds-typography-line-height-title-xl: var(--ds-space-9x); /* --- Text Transform ---------------------------------------------------- */ --ds-typography-transform-uppercase: uppercase; --ds-typography-transform-lowercase: lowercase; --ds-typography-transform-capitalize: capitalize; } /* ============================================================================= 4. SPACING (4px Base Grid) =========================================================================== */ :root, :host { --ds-space-0x: 0px; --ds-space-05x: 2px; --ds-space-1x: 4px; --ds-space-2x: 8px; --ds-space-3x: 12px; --ds-space-4x: 16px; --ds-space-5x: 20px; --ds-space-6x: 24px; --ds-space-7x: 28px; --ds-space-8x: 32px; --ds-space-9x: 36px; --ds-space-10x: 40px; --ds-space-11x: 44px; --ds-space-12x: 48px; --ds-space-13x: 52px; --ds-space-14x: 56px; --ds-space-15x: 60px; --ds-space-16x: 64px; --ds-space-17x: 68px; --ds-space-18x: 72px; } /* ============================================================================= 5. SHAPES — Borders, Radii, Lines =========================================================================== */ :root, :host { --ds-shape-line-1: 1px; --ds-shape-line-2: 2px; --ds-shape-line-4: 4px; --ds-shape-line-divider: var(--ds-shape-line-1); --ds-shape-line-signal-bar: var(--ds-shape-line-2); --ds-shape-line-accent-bar: var(--ds-shape-line-4); --ds-shape-radius-2: 2px; --ds-shape-radius-9999: 9999px; --ds-shape-radius-base: var(--ds-shape-radius-2); --ds-shape-radius-circle: var(--ds-shape-radius-9999); } /* ============================================================================= 6. ELEVATION / SHADOWS =========================================================================== */ :root, :host { --ds-elevation-0: 0; --ds-elevation-1: drop-shadow(0px 0px 1px rgba(0,0,0,0.2)) drop-shadow(0px 1px 1px rgba(0,0,0,0.2)); --ds-elevation-2: drop-shadow(0px 0px 1px rgba(0,0,0,0.2)) drop-shadow(0px 2px 2px rgba(0,0,0,0.16)); --ds-elevation-3: drop-shadow(0px 0px 1px rgba(0,0,0,0.2)) drop-shadow(0px 2px 2px rgba(0,0,0,0.12)) drop-shadow(0px 4px 4px rgba(0,0,0,0.12)); --ds-elevation-4: drop-shadow(0px 0px 1px rgba(0,0,0,0.2)) drop-shadow(0px 4px 4px rgba(0,0,0,0.12)) drop-shadow(0px 8px 8px rgba(0,0,0,0.12)); --ds-elevation-5: drop-shadow(0px 0px 1px rgba(0,0,0,0.2)) drop-shadow(0px 4px 4px rgba(0,0,0,0.1)) drop-shadow(0px 8px 8px rgba(0,0,0,0.1)) drop-shadow(0px 12px 16px rgba(0,0,0,0.1)); --ds-elevation-6: drop-shadow(0px 0px 1px rgba(0,0,0,0.2)) drop-shadow(0px 8px 8px rgba(0,0,0,0.1)) drop-shadow(0px 12px 16px rgba(0,0,0,0.1)) drop-shadow(0px 16px 20px rgba(0,0,0,0.1)); --ds-elevation-7: drop-shadow(0px 0px 1px rgba(0,0,0,0.2)) drop-shadow(0px 12px 16px rgba(0,0,0,0.1)) drop-shadow(0px 16px 20px rgba(0,0,0,0.1)) drop-shadow(0px 20px 24px rgba(0,0,0,0.1)); --ds-elevation-8: drop-shadow(0px 0px 1px rgba(0,0,0,0.2)) drop-shadow(0px 16px 20px rgba(0,0,0,0.1)) drop-shadow(0px 20px 24px rgba(0,0,0,0.1)) drop-shadow(0px 24px 28px rgba(0,0,0,0.1)); /* Semantische Zuordnungen */ --ds-elevation-none: var(--ds-elevation-0); --ds-elevation-base: var(--ds-elevation-1); --ds-elevation-component: var(--ds-elevation-2); --ds-elevation-temporary: var(--ds-elevation-4); --ds-elevation-navigation: var(--ds-elevation-5); --ds-elevation-notification: var(--ds-elevation-6); --ds-elevation-modal: var(--ds-elevation-8); } /* ============================================================================= 7. MOTION / ANIMATION =========================================================================== */ :root, :host { --ds-motion-duration-0: 88ms; /* rapid */ --ds-motion-duration-1: 133ms; /* quick */ --ds-motion-duration-2: 200ms; /* standard */ --ds-motion-duration-3: 300ms; /* slow */ --ds-motion-delay-0: 88ms; --ds-motion-delay-1: 133ms; --ds-motion-delay-2: 200ms; --ds-motion-delay-3: 300ms; --ds-motion-timing-0: cubic-bezier(0, 0, 0.2, 1); /* entrance */ --ds-motion-timing-1: cubic-bezier(0.4, 0.15, 1, 1); /* exit */ --ds-motion-timing-2: cubic-bezier(0.4, 0.15, 0.2, 1); /* standard */ --ds-motion-duration-rapid: var(--ds-motion-duration-0); --ds-motion-duration-quick: var(--ds-motion-duration-1); --ds-motion-duration-standard: var(--ds-motion-duration-2); --ds-motion-duration-slow: var(--ds-motion-duration-3); --ds-motion-timing-entrance: var(--ds-motion-timing-0); --ds-motion-timing-exit: var(--ds-motion-timing-1); --ds-motion-timing-standard: var(--ds-motion-timing-2); } /* ============================================================================= 8. LAYOUT — Grid, Container, Z-Index =========================================================================== */ :root, :host { --ds-gutter: 24px; --ds-gutter-x: 24px; --ds-gutter-y: 0; --ds-container-max-width-sm: 540px; --ds-container-max-width-md: 720px; --ds-container-max-width-lg: 960px; --ds-container-max-width-xl: 1140px; --ds-container-max-width-xxl: 1320px; --ds-z-index-content-base: 20; --ds-z-index-header-base: 40; --ds-z-index-tooltip-base: 50; --ds-z-index-tooltip-popup: 60; --ds-z-index-modal-base: 120; --ds-z-index-sky-base: 999; } /* ============================================================================= 9. ICON SIZES =========================================================================== */ :root, :host { --ds-icon-size-xsmall: var(--ds-space-3x); /* 12px */ --ds-icon-size-small: var(--ds-space-4x); /* 16px */ --ds-icon-size-medium: var(--ds-space-5x); /* 20px */ --ds-icon-size-large: var(--ds-space-6x); /* 24px */ } /* ============================================================================= 10. KOMPONENTEN-TOKENS — Buttons =========================================================================== */ :root, :host { --ds-shape-radius-button: 2px; --ds-shape-size-ymin-button: 32px; --ds-shape-size-ymin-button-lg: 40px; --ds-shape-size-ymin-button-sm: 24px; --ds-color-surface-button-primary: var(--ds-color-surface-action-strong); --ds-color-surface-button-primary-hover: var(--ds-color-surface-action-strong-hover); --ds-color-typography-button-primary: var(--ds-color-typography-invert); --ds-color-border-button-outline: var(--ds-color-border-neutral-mild); --ds-color-border-button-outline-hover: var(--ds-color-border-action-strong); --ds-color-typography-button-outline: var(--ds-color-typography-action); --ds-color-surface-button-ghost: var(--ds-color-surface-transparent); --ds-color-surface-button-ghost-hover: var(--ds-color-surface-action-mild); --ds-color-typography-button-ghost: var(--ds-color-typography-action); --ds-typography-family-button: var(--ds-typography-family-system); --ds-typography-size-button: var(--ds-typography-size-label); --ds-typography-size-button-lg: var(--ds-typography-size-regular); --ds-typography-weight-button: var(--ds-typography-weight-strong); } /* ============================================================================= 11. KOMPONENTEN-TOKENS — Inputs =========================================================================== */ :root, :host { --ds-shape-radius-input: 2px; --ds-shape-size-y-input: 32px; --ds-shape-size-y-input-large: 40px; --ds-color-surface-input: var(--ds-color-surface-base); --ds-color-border-input: var(--ds-color-border-neutral-mild); --ds-color-border-input-focus: var(--ds-color-border-action-strong); --ds-color-border-input-error: var(--ds-color-border-critical-strong); --ds-color-text-input-value: var(--ds-color-typography-base); --ds-color-text-input-label: var(--ds-color-typography-neutral); --ds-color-text-input-placeholder: var(--ds-color-typography-placeholder); } /* ============================================================================= 12. KOMPONENTEN-TOKENS — Tags / Badges =========================================================================== */ :root, :host { --ds-shape-radius-tag: 2px; --ds-shape-size-y-tag: 20px; --ds-shape-size-y-tag-large: 24px; --ds-shape-size-y-tag-small: 16px; --ds-font-size-tag: var(--ds-typography-size-label); --ds-font-weight-tag: var(--ds-typography-weight-regular); } /* ============================================================================= 13. KOMPONENTEN-TOKENS — Tables =========================================================================== */ :root, :host { --ds-shape-radius-table: var(--ds-shape-radius-base); --ds-shape-size-ymin-table-header: 56px; --ds-shape-size-ymin-table-cell: 32px; --ds-color-surface-table-cell-even: var(--ds-color-surface-page); --ds-color-surface-table-cell-odd: var(--ds-color-surface-base); --ds-color-surface-table-cell-hover: var(--ds-color-surface-neutral); --ds-color-surface-table-cell-selected: var(--ds-color-surface-action); --ds-font-weight-table-header: var(--ds-typography-weight-medium); } /* ============================================================================= 14. KOMPONENTEN-TOKENS — Navigation / Sidebar =========================================================================== */ :root, :host { --ds-shape-size-y-header: var(--ds-space-10x); /* 40px */ --ds-shape-width-sidedrawer: 280px; --ds-color-surface-header: var(--ds-color-surface-base); --ds-color-surface-nav-item-selected: var(--ds-color-surface-action); --ds-color-surface-nav-item-hover: var(--ds-color-surface-neutral); --ds-color-surface-nav-item-selected-bar: var(--ds-color-surface-action-strong-active); } /* ============================================================================= 15. Brand Fonts =========================================================================== Design Spine verwendet "Times New Roman" als Brand Font für Überschriften. Keine @font-face-Deklarationen nötig — die Font ist systemseitig verfügbar. =========================================================================== */ /* ============================================================================= 16. DARK MODE =========================================================================== */ :root.ds-dark { --ds-color-typography-base: var(--ds-color-cool-grey-100); --ds-color-typography-action: var(--ds-color-ocean-300); --ds-color-typography-action-hover: var(--ds-color-ocean-200); --ds-color-typography-neutral: var(--ds-color-cool-grey-300); --ds-color-typography-disabled: var(--ds-color-cool-grey-100-alpha-30); --ds-color-typography-invert: var(--ds-color-cool-grey-900); --ds-color-typography-critical: var(--ds-color-red-300); --ds-color-typography-caution: var(--ds-color-yellow-300); --ds-color-typography-positive: var(--ds-color-green-300); --ds-color-typography-info: var(--ds-color-blue-300); --ds-color-surface-base: var(--ds-color-cool-grey-900); --ds-color-surface-page: var(--ds-color-cool-grey-950); --ds-color-surface-invert: var(--ds-color-cool-grey-100); --ds-color-surface-neutral: var(--ds-color-cool-grey-800); --ds-color-surface-neutral-hover: var(--ds-color-cool-grey-700); --ds-color-surface-action: var(--ds-color-ocean-800); --ds-color-surface-action-hover: var(--ds-color-ocean-700); --ds-color-surface-action-strong: var(--ds-color-ocean-300); --ds-color-surface-disabled: var(--ds-color-grey-100-alpha-10); --ds-color-border-base: var(--ds-color-cool-grey-800); --ds-color-border-neutral: var(--ds-color-cool-grey-700); --ds-color-border-action-strong: var(--ds-color-ocean-200); --ds-color-border-critical-strong: var(--ds-color-red-200); --ds-color-icon-base: var(--ds-color-cool-grey-100); --ds-color-icon-action: var(--ds-color-ocean-300); --ds-color-icon-invert: var(--ds-color-cool-grey-900); } /* ============================================================================= 17. RESPONSIVE BREAKPOINTS (Referenz) =========================================================================== Breakpoints für Media Queries (nicht als CSS Variables nutzbar): --bp-sm: 576px @media (min-width: 576px) --bp-md: 768px @media (min-width: 768px) --bp-lg: 992px @media (min-width: 992px) --bp-xl: 1200px @media (min-width: 1200px) --bp-xxl: 1400px @media (min-width: 1400px) =========================================================================== */