@marioschmidt/design-system-tokens 1.3.7 → 1.3.9

package/dist/ios/shared/DesignSystemTheme.swift

@@ -1,722 +0,0 @@
-// Do not edit directly, this file was auto-generated.
-//
-// BILD Design System Tokens v1.3.7
-// Generated by Style Dictionary v4.2.0
-//
-// Context: SwiftUI DesignSystemTheme
-Dual-Axis Theme Provider with Unified Protocols
-//
-// Copyright (c) 2026 Axel Springer Deutschland GmbH
-// Proprietary and confidential. All rights reserved.
-//
-// Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/ios.md
-
-import SwiftUI
-
-// MARK: - Unified Protocols
-
-/// Unified color scheme protocol for all color brands (BILD, SportBILD)
-/// Allows interchangeable color schemes across content brands
-public protocol DesignColorScheme: Sendable {
-    var textColorBrand: Color { get }
-    var textColorBrandLightOnly: Color { get }
-    var textColorPrimary: Color { get }
-    var textColorSecondary: Color { get }
-    var textColorTertiary: Color { get }
-    var kickerTextColor: Color { get }
-    var headlineTextColor: Color { get }
-    var textColorOnImage: Color { get }
-    var textColorSecondaryOnDark: Color { get }
-    var textColorPrimaryOnLight: Color { get }
-    var kickerTextColorOnDark: Color { get }
-    var kickerTextColorOnLight: Color { get }
-    var textColorPrimaryOnDark: Color { get }
-    var textColorSecondaryOnLight: Color { get }
-    var textColorIdle: Color { get }
-    var textColorDisabled: Color { get }
-    var textColorHover: Color { get }
-    var textColorActive: Color { get }
-    var textColorPrimaryInverse: Color { get }
-    var textColorSecondaryInverse: Color { get }
-    var textColorInverseHighContrast: Color { get }
-    var textColorSuccess: Color { get }
-    var textColorError: Color { get }
-    var textColorWarning: Color { get }
-    var bgColorPrimary: Color { get }
-    var bgColorDisabled: Color { get }
-    var bgColorSecondary: Color { get }
-    var bgColorPrimaryConstDark: Color { get }
-    var bgColorQuaternary: Color { get }
-    var bgColorTertiary: Color { get }
-    var bgColorPrimaryConstLight: Color { get }
-    var bgColorQuintenary: Color { get }
-    var bgColorBrandLightOnly: Color { get }
-    var bgColorBrandSolid: Color { get }
-    var bgColorBrandSolidHover: Color { get }
-    var bgColorBrandSolidActive: Color { get }
-    var bgColorBrandTint: Color { get }
-    var bgColorBrandTintHover: Color { get }
-    var bgColorPrimaryInverse: Color { get }
-    var bgColorTertiaryInverse: Color { get }
-    var bgColorQuaternaryInverse: Color { get }
-    var bgColorSecondaryInverse: Color { get }
-    var bgColorQuintenaryInverse: Color { get }
-    var bgColorSuccessTint: Color { get }
-    var bgColorSuccessSolid: Color { get }
-    var bgColorSuccessSolidHover: Color { get }
-    var bgColorSuccessTintHover: Color { get }
-    var bgColorSuccessSolidActive: Color { get }
-    var bgColorTertiaryGradientStop: Color { get }
-    var bgColorPrimaryGradientStop: Color { get }
-    var bgColorSecondaryGradientStop: Color { get }
-    var overlayScrimBlackConst: Color { get }
-    var overlayScrimWhiteConst: Color { get }
-    var bgColorErrorTint: Color { get }
-    var bgColorErrorTintHover: Color { get }
-    var bgColorErrorSolid: Color { get }
-    var bgColorErrorSolidHover: Color { get }
-    var bgColorWarningTint: Color { get }
-    var bgColorWarningTintHover: Color { get }
-    var bgColorWarningSolid: Color { get }
-    var bgColorWarningSolidHover: Color { get }
-    var borderColorDefault: Color { get }
-    var borderColorSubtle: Color { get }
-    var borderColorExtraStrong: Color { get }
-    var borderColorStrong: Color { get }
-    var borderColorSubtleOnDark: Color { get }
-    var borderColorDefaultOnDark: Color { get }
-    var borderColorSubtleOnLight: Color { get }
-    var borderColorDefaultOnLight: Color { get }
-    var borderColorSuccess: Color { get }
-    var borderColorError: Color { get }
-    var borderColorWarning: Color { get }
-    var borderColorDisabled: Color { get }
-    var borderColorSelected: Color { get }
-    var borderColorActive: Color { get }
-    var borderColorIdle: Color { get }
-    var borderColorDefaultInverse: Color { get }
-    var borderColorSubtleInverse: Color { get }
-    var borderColorBrand: Color { get }
-    var borderColorBrandLightOnly: Color { get }
-    var borderColorBrandConst: Color { get }
-    var borderColorNoContrast: Color { get }
-    var iconColorIdle: Color { get }
-    var iconColorDisabled: Color { get }
-    var iconColorHover: Color { get }
-    var iconColorActive: Color { get }
-    var iconColorSecondaryOnLight: Color { get }
-    var iconColorPrimaryOnDark: Color { get }
-    var iconColorSecondaryOnDark: Color { get }
-    var iconColorPrimaryOnLight: Color { get }
-    var iconColorConstOnImage: Color { get }
-    var iconColorSuccess: Color { get }
-    var iconColorError: Color { get }
-    var iconColorWarning: Color { get }
-    var iconColorBrand: Color { get }
-    var iconColorBrandLightOnly: Color { get }
-    var iconColorPrimary: Color { get }
-    var iconColorSecondary: Color { get }
-    var iconColorTertiary: Color { get }
-    var iconColorPrimaryInverse: Color { get }
-    var iconColorSecondaryInverse: Color { get }
-    var iconColorInverseHighContrast: Color { get }
-}
-
-/// Unified sizing scheme protocol for all content brands
-public protocol DesignSizingScheme: Sendable {
-    var gridSpaceRespLg: CGFloat { get }
-    var gridSpaceRespXl: CGFloat { get }
-    var gridSpaceRespBase: CGFloat { get }
-    var gridSpaceRespSm: CGFloat { get }
-    var pageInlineSpace: CGFloat { get }
-    var gridSpaceConstLg: CGFloat { get }
-    var gridSpaceConstSm: CGFloat { get }
-    var layoutGuideGridColums: CGFloat { get }
-    var sectionSpaceBase: CGFloat { get }
-    var sectionSpaceLg: CGFloat { get }
-    var paragraphEndSpace: CGFloat { get }
-    var sectionSpaceSm: CGFloat { get }
-    var breakpointMinWidthSize: CGFloat { get }
-    var breakpointMaxWidthSize: CGFloat { get }
-    var canvasHeightSizeWeb: CGFloat { get }
-    var contentMaxWidthMedium: CGFloat { get }
-    var contentMaxWidthFull: CGFloat { get }
-    var canvasWidthSizeWeb: CGFloat { get }
-    var canvasWidthSizeApp: CGFloat { get }
-    var canvasHeightSizeApp: CGFloat { get }
-    var title1fontSize: CGFloat { get }
-    var title2fontSize: CGFloat { get }
-    var display1fontSize: CGFloat { get }
-    var display2fontSize: CGFloat { get }
-    var display3fontSize: CGFloat { get }
-    var headline1fontSize: CGFloat { get }
-    var headline2fontSize: CGFloat { get }
-    var headline3fontSize: CGFloat { get }
-    var headline4fontSize: CGFloat { get }
-    var bodyFontSize: CGFloat { get }
-    var label3fontSize: CGFloat { get }
-    var label2fontSize: CGFloat { get }
-    var label1fontSize: CGFloat { get }
-    var callout1fontSize: CGFloat { get }
-    var footnote1fontSize: CGFloat { get }
-    var footnote2fontSize: CGFloat { get }
-    var kicker1fontSize: CGFloat { get }
-    var kicker2fontSize: CGFloat { get }
-    var kicker3fontSize: CGFloat { get }
-    var kicker4fontSize: CGFloat { get }
-    var subheadline1fontSize: CGFloat { get }
-    var quoteFontSize: CGFloat { get }
-    var bodyFontFamily: String { get }
-    var calloutFontFamily: String { get }
-    var headlineFontFamily: String { get }
-    var footnoteFontFamily: String { get }
-    var labelFontFamily: String { get }
-    var kickerFontFamily: String { get }
-    var subheadlineFontFamily: String { get }
-    var titleFontFamily: String { get }
-    var quoteFontFamily: String { get }
-    var displayFontFamily: String { get }
-    var calloutFontWeight: CGFloat { get }
-    var labelFontWeightBold: CGFloat { get }
-    var labelFontWeightBook: CGFloat { get }
-    var labelFontWeightBoldSt: String { get }
-    var labelFontWeightBookSt: String { get }
-    var bodyFontWeightBook: CGFloat { get }
-    var bodyFontWeightBold: CGFloat { get }
-    var kickerFontWeight: CGFloat { get }
-    var kickerFontWeightSt: String { get }
-    var subheadlineFontWeight: CGFloat { get }
-    var headline1fontWeight: CGFloat { get }
-    var headline2fontWeight: CGFloat { get }
-    var headline3fontWeight: CGFloat { get }
-    var headline4fontWeight: CGFloat { get }
-    var headline1fontWeightSt: String { get }
-    var headline2fontWeightSt: String { get }
-    var headline3fontWeightSt: String { get }
-    var headline4fontWeightSt: String { get }
-    var titleFontWeight: CGFloat { get }
-    var displayFontWeight: CGFloat { get }
-    var displayFontWeightSt: String { get }
-    var quoteFontWeight: CGFloat { get }
-    var footnoteFontWeightBook: CGFloat { get }
-    var footnoteFontWeightBold: CGFloat { get }
-    var bodyLineHeight: CGFloat { get }
-    var kicker4lineHeight: CGFloat { get }
-    var kicker3lineHeight: CGFloat { get }
-    var kicker2lineHeight: CGFloat { get }
-    var kicker1lineHeight: CGFloat { get }
-    var label3lineHeight: CGFloat { get }
-    var label1lineHeight: CGFloat { get }
-    var label2lineHeight: CGFloat { get }
-    var display1lineHeight: CGFloat { get }
-    var display2lineHeight: CGFloat { get }
-    var display3lineHeight: CGFloat { get }
-    var title1lineHeight: CGFloat { get }
-    var title2lineHeight: CGFloat { get }
-    var quoteLineHeight: CGFloat { get }
-    var footnote1lineHeight: CGFloat { get }
-    var footnote2lineHeight: CGFloat { get }
-    var headline1lineHeight: CGFloat { get }
-    var headline2lineHeight: CGFloat { get }
-    var headline3lineHeight: CGFloat { get }
-    var headline4lineHeight: CGFloat { get }
-    var calloutLineHeight: CGFloat { get }
-    var subheadline1lineHeight: CGFloat { get }
-    var letterSpacePositiveSm: CGFloat { get }
-    var letterSpacePositiveLg: CGFloat { get }
-    var letterSpacePositiveMd: CGFloat { get }
-    var letterSpaceNone: CGFloat { get }
-    var letterSpaceNegativeSm: CGFloat { get }
-    var letterSpaceNegativeMd: CGFloat { get }
-    var letterSpaceNegativeLg: CGFloat { get }
-    var letterSpaceNegativeXs: CGFloat { get }
-    var letterSpacePositiveXs: CGFloat { get }
-    var display1letterSpace: CGFloat { get }
-    var display2letterSpace: CGFloat { get }
-    var display3letterSpace: CGFloat { get }
-    var borderRadiusXs: CGFloat { get }
-    var borderRadiusMd: CGFloat { get }
-    var borderRadiusSm: CGFloat { get }
-    var borderRadiusXl: CGFloat { get }
-    var borderRadiusLg: CGFloat { get }
-    var borderRadiusNone: CGFloat { get }
-    var borderRadiusFull: CGFloat { get }
-    var borderWidthThin: CGFloat { get }
-    var borderWidthThick: CGFloat { get }
-    var borderWidthHairline: CGFloat { get }
-    var changeOnLg: String { get }
-    var changeOnMd: String { get }
-    var bpSpecificWeb: String { get }
-    var bpSpecificApp: String { get }
-    var inlineSpaceRespSm: CGFloat { get }
-    var inlineSpaceRespMd: CGFloat { get }
-    var inlineSpaceRespLg: CGFloat { get }
-    var inlineSpaceResp2xl: CGFloat { get }
-    var inlineSpaceRespXl: CGFloat { get }
-    var inlineSpaceConstSm: CGFloat { get }
-    var inlineSpaceConstMd: CGFloat { get }
-    var inlineSpaceConstLg: CGFloat { get }
-    var inlineSpaceConst2xl: CGFloat { get }
-    var inlineSpaceConstXl: CGFloat { get }
-    var inlineSpaceConstXs: CGFloat { get }
-    var inlineSpaceConst3xs: CGFloat { get }
-    var inlineSpaceConst2xs: CGFloat { get }
-    var gapSpaceRespXs: CGFloat { get }
-    var gapSpaceRespLg: CGFloat { get }
-    var gapSpaceRespXl: CGFloat { get }
-    var gapSpaceResp2xl: CGFloat { get }
-    var gapSpaceRespMd: CGFloat { get }
-    var gapSpaceRespSm: CGFloat { get }
-    var gapSpaceResp2xs: CGFloat { get }
-    var gapSpaceResp3xl: CGFloat { get }
-    var gapSpaceConst2xs: CGFloat { get }
-    var gapSpaceConstXs: CGFloat { get }
-    var gapSpaceConstSm: CGFloat { get }
-    var gapSpaceConstMd: CGFloat { get }
-    var gapSpaceConstLg: CGFloat { get }
-    var gapSpaceConstXl: CGFloat { get }
-    var gapSpaceConst2xl: CGFloat { get }
-    var gapSpaceConst3xl: CGFloat { get }
-    var sizeConst3xs: CGFloat { get }
-    var sizeConst2xs: CGFloat { get }
-    var sizeConstXs: CGFloat { get }
-    var sizeConstSm: CGFloat { get }
-    var sizeConstMd: CGFloat { get }
-    var sizeConstLg: CGFloat { get }
-    var sizeConstXl: CGFloat { get }
-    var sizeConst3xl: CGFloat { get }
-    var sizeConst4xl: CGFloat { get }
-    var sizeConst2xl: CGFloat { get }
-    var sizeConst4xs: CGFloat { get }
-    var sizeResp3xs: CGFloat { get }
-    var sizeResp2xs: CGFloat { get }
-    var sizeRespXs: CGFloat { get }
-    var sizeRespSm: CGFloat { get }
-    var sizeRespMd: CGFloat { get }
-    var sizeRespLg: CGFloat { get }
-    var sizeRespXl: CGFloat { get }
-    var sizeResp2xl: CGFloat { get }
-    var sizeResp3xl: CGFloat { get }
-    var sizeResp4xl: CGFloat { get }
-    var sizeResp4xs: CGFloat { get }
-    var breakpointName: String { get }
-}
-
-/// Unified effects scheme protocol for all color brands
-public protocol DesignEffectsScheme: Sendable {
-    var shadowSoftSm: ShadowStyle { get }
-    var shadowSoftMd: ShadowStyle { get }
-    var shadowSoftLg: ShadowStyle { get }
-    var shadowSoftXl: ShadowStyle { get }
-    var shadowHardSm: ShadowStyle { get }
-    var shadowHardMd: ShadowStyle { get }
-    var shadowHardLg: ShadowStyle { get }
-    var shadowHardXl: ShadowStyle { get }
-}
-
-/// Unified typography scheme protocol for all content brands
-public protocol DesignTypographyScheme: Sendable {
-    var display1: TextStyle { get }
-    var display2: TextStyle { get }
-    var display3: TextStyle { get }
-    var headline1: TextStyle { get }
-    var headline2: TextStyle { get }
-    var headline3: TextStyle { get }
-    var headline4: TextStyle { get }
-    var subheadline1: TextStyle { get }
-    var kicker1: TextStyle { get }
-    var kicker2: TextStyle { get }
-    var kicker3: TextStyle { get }
-    var kicker4: TextStyle { get }
-    var title1: TextStyle { get }
-    var title1uppercase: TextStyle { get }
-    var title2: TextStyle { get }
-    var title2uppercase: TextStyle { get }
-    var callout: TextStyle { get }
-    var body: TextStyle { get }
-    var bodyItalic: TextStyle { get }
-    var bodyBold: TextStyle { get }
-    var bodyBoldItalic: TextStyle { get }
-    var textLink: TextStyle { get }
-    var textLinkItalic: TextStyle { get }
-    var textLinkBold: TextStyle { get }
-    var textLinkHover: TextStyle { get }
-    var textLinkBoldHover: TextStyle { get }
-    var footnote1: TextStyle { get }
-    var footnote1bold: TextStyle { get }
-    var footnote2: TextStyle { get }
-    var footnote2bold: TextStyle { get }
-    var label1: TextStyle { get }
-    var label1bold: TextStyle { get }
-    var label1uppercaseBold: TextStyle { get }
-    var label2: TextStyle { get }
-    var label2uppercase: TextStyle { get }
-    var label2bold: TextStyle { get }
-    var label2uppercaseBold: TextStyle { get }
-    var label3: TextStyle { get }
-    var label3uppercase: TextStyle { get }
-    var label3bold: TextStyle { get }
-    var label3uppercaseBold: TextStyle { get }
-    var quote: TextStyle { get }
-}
-
-/// Unified density scheme protocol for all content brands
-/// Semantic density tokens (Global/StackSpace) that vary by density mode
-public protocol DesignDensityScheme: Sendable {
-    var densityStackSpaceConst3Xs: CGFloat { get }
-    var densityStackSpaceConst2Xs: CGFloat { get }
-    var densityStackSpaceConstXs: CGFloat { get }
-    var densityStackSpaceConstSm: CGFloat { get }
-    var densityStackSpaceConstMd: CGFloat { get }
-    var densityStackSpaceConstLg: CGFloat { get }
-    var densityStackSpaceConstXl: CGFloat { get }
-    var densityStackSpaceConst2Xl: CGFloat { get }
-    var densityXsStackSpaceRespSm: CGFloat { get }
-    var densityXsStackSpaceRespMd: CGFloat { get }
-    var densityXsStackSpaceRespLg: CGFloat { get }
-    var densityXsStackSpaceRespXl: CGFloat { get }
-    var densityXsStackSpaceResp2Xl: CGFloat { get }
-    var densitySmStackSpaceRespSm: CGFloat { get }
-    var densitySmStackSpaceRespMd: CGFloat { get }
-    var densitySmStackSpaceRespLg: CGFloat { get }
-    var densitySmStackSpaceRespXl: CGFloat { get }
-    var densitySmStackSpaceResp2Xl: CGFloat { get }
-    var densityMdStackSpaceRespSm: CGFloat { get }
-    var densityMdStackSpaceRespMd: CGFloat { get }
-    var densityMdStackSpaceRespLg: CGFloat { get }
-    var densityMdStackSpaceRespXl: CGFloat { get }
-    var densityMdStackSpaceResp2Xl: CGFloat { get }
-    var densityLgStackSpaceRespSm: CGFloat { get }
-    var densityLgStackSpaceRespMd: CGFloat { get }
-    var densityLgStackSpaceRespLg: CGFloat { get }
-    var densityLgStackSpaceRespXl: CGFloat { get }
-    var densityLgStackSpaceResp2Xl: CGFloat { get }
-}
-
-// MARK: - Dual-Axis Theme Provider
-
-/// Multi-brand theme provider with dual-axis architecture
-/// - ColorBrand axis: Defines colors and effects (BILD, SportBILD)
-/// - ContentBrand axis: Defines sizing, typography, layout (BILD, SportBILD, Advertorial)
-///
-/// Example usage:
-/// ```swift
-/// // Advertorial content with BILD colors
-/// DesignSystemTheme(colorBrand: .bild, contentBrand: .advertorial)
-///
-/// // Advertorial content with SportBILD colors
-/// DesignSystemTheme(colorBrand: .sportbild, contentBrand: .advertorial)
-/// ```
-@Observable
-public final class DesignSystemTheme: @unchecked Sendable {
-
-    // MARK: - Shared Instance
-    public static let shared = DesignSystemTheme()
-
-    // MARK: - Theme State (Dual-Axis)
-
-    /// Color brand determines the color palette and effects
-    public var colorBrand: ColorBrand = .bild
-
-    /// Content brand determines sizing, typography, and layout
-    public var contentBrand: ContentBrand = .bild
-
-    /// Dark/Light mode
-    public var isDarkTheme: Bool = false
-
-    /// Size class for responsive layouts
-    public var sizeClass: SizeClass = .compact
-
-    /// Density mode
-    public var density: Density = .default
-
-    private init() {}
-
-    // MARK: - Factory
-
-    public init(
-        colorBrand: ColorBrand = .bild,
-        contentBrand: ContentBrand = .bild,
-        isDarkTheme: Bool = false,
-        sizeClass: SizeClass = .compact,
-        density: Density = .default
-    ) {
-        self.colorBrand = colorBrand
-        self.contentBrand = contentBrand
-        self.isDarkTheme = isDarkTheme
-        self.sizeClass = sizeClass
-        self.density = density
-    }
-
-    // MARK: - Color Access (based on colorBrand)
-
-    /// Current color scheme based on colorBrand and isDarkTheme
-    public var colors: any DesignColorScheme {
-        switch colorBrand {
-        case .bild:
-            return isDarkTheme ? BildDarkColors.shared : BildLightColors.shared
-        case .sportbild:
-            return isDarkTheme ? SportbildDarkColors.shared : SportbildLightColors.shared
-        }
-    }
-
-    /// Current effects scheme based on colorBrand and isDarkTheme
-    public var effects: any DesignEffectsScheme {
-        switch colorBrand {
-        case .bild:
-            return isDarkTheme ? BildEffectsDark.shared : BildEffectsLight.shared
-        case .sportbild:
-            return isDarkTheme ? SportbildEffectsDark.shared : SportbildEffectsLight.shared
-        }
-    }
-
-    // MARK: - Sizing Access (based on contentBrand)
-
-    /// Current sizing scheme based on contentBrand and sizeClass
-    public var sizing: any DesignSizingScheme {
-        switch contentBrand {
-        case .bild:
-            return sizeClass == .compact ? BildSizingCompact.shared : BildSizingRegular.shared
-        case .sportbild:
-            return sizeClass == .compact ? SportbildSizingCompact.shared : SportbildSizingRegular.shared
-        case .advertorial:
-            return sizeClass == .compact ? AdvertorialSizingCompact.shared : AdvertorialSizingRegular.shared
-        }
-    }
-
-    // MARK: - Typography Access (based on contentBrand)
-
-    /// Current typography scheme based on contentBrand and sizeClass
-    public var typography: any DesignTypographyScheme {
-        switch contentBrand {
-        case .bild:
-            return sizeClass == .compact ? BildTypographyCompact.shared : BildTypographyRegular.shared
-        case .sportbild:
-            return sizeClass == .compact ? SportbildTypographyCompact.shared : SportbildTypographyRegular.shared
-        case .advertorial:
-            return sizeClass == .compact ? AdvertorialTypographyCompact.shared : AdvertorialTypographyRegular.shared
-        }
-    }
-
-    // MARK: - Density Spacing Access (internal)
-
-    /// Internal density spacing scheme - not for direct consumption.
-    /// Use the resolver properties below (stackSpaceRespMd, stackSpaceConstLg, etc.)
-    /// which automatically resolve based on SizeClass and DensityMode.
-    internal var densitySpacing: any DesignDensityScheme {
-        switch density {
-        case .default: return DensityDefault.shared
-        case .dense: return DensityDense.shared
-        case .spacious: return DensitySpacious.shared
-        }
-    }
-
-    // MARK: - Density-Aware Spacing (Auto-generated from Breakpoint × Density Matrix)
-    //
-    // Values resolved at build-time using ID-based cross-collection resolution.
-    // SizeClass mapping: compact→sm, regular→lg
-    //
-    // Consumer API: theme.stackSpaceRespMd
-
-    // Constant spacing tokens (same value across all breakpoints)
-
-    /// stackSpaceConstSm - constant spacing, varies only by density mode
-    public var stackSpaceConstSm: CGFloat {
-        switch density {
-        case .dense: return 6
-        case .default: return 8
-        case .spacious: return 10
-        }
-    }
-
-    /// stackSpaceConstMd - constant spacing, varies only by density mode
-    public var stackSpaceConstMd: CGFloat {
-        switch density {
-        case .dense: return 8
-        case .default: return 12
-        case .spacious: return 14
-        }
-    }
-
-    /// stackSpaceConstLg - constant spacing, varies only by density mode
-    public var stackSpaceConstLg: CGFloat {
-        switch density {
-        case .dense: return 12
-        case .default: return 16
-        case .spacious: return 20
-        }
-    }
-
-    /// stackSpaceConst2Xl - constant spacing, varies only by density mode
-    public var stackSpaceConst2Xl: CGFloat {
-        switch density {
-        case .dense: return 24
-        case .default: return 32
-        case .spacious: return 40
-        }
-    }
-
-    /// stackSpaceConstXl - constant spacing, varies only by density mode
-    public var stackSpaceConstXl: CGFloat {
-        switch density {
-        case .dense: return 16
-        case .default: return 24
-        case .spacious: return 28
-        }
-    }
-
-    /// stackSpaceConstXs - constant spacing, varies only by density mode
-    public var stackSpaceConstXs: CGFloat {
-        switch density {
-        case .dense: return 2
-        case .default: return 6
-        case .spacious: return 8
-        }
-    }
-
-    /// stackSpaceConst3Xs - constant spacing, varies only by density mode
-    public var stackSpaceConst3Xs: CGFloat {
-        switch density {
-        case .dense: return 2
-        case .default: return 2
-        case .spacious: return 2
-        }
-    }
-
-    /// stackSpaceConst2Xs - constant spacing, varies only by density mode
-    public var stackSpaceConst2Xs: CGFloat {
-        switch density {
-        case .dense: return 2
-        case .default: return 4
-        case .spacious: return 4
-        }
-    }
-
-    // Responsive spacing tokens (resolved by SizeClass × Density)
-
-    /// stackSpaceRespMd - responsive spacing, varies by SizeClass and density mode
-    public var stackSpaceRespMd: CGFloat {
-        if sizeClass == .compact {
-            switch density {
-            case .dense: return 8
-            case .default: return 12
-            case .spacious: return 14
-            }
-        } else {
-            switch density {
-            case .dense: return 16
-            case .default: return 24
-            case .spacious: return 28
-            }
-        }
-    }
-
-    /// stackSpaceRespLg - responsive spacing, varies by SizeClass and density mode
-    public var stackSpaceRespLg: CGFloat {
-        if sizeClass == .compact {
-            switch density {
-            case .dense: return 12
-            case .default: return 16
-            case .spacious: return 20
-            }
-        } else {
-            switch density {
-            case .dense: return 24
-            case .default: return 32
-            case .spacious: return 40
-            }
-        }
-    }
-
-    /// stackSpaceResp2Xl - responsive spacing, varies by SizeClass and density mode
-    public var stackSpaceResp2Xl: CGFloat {
-        if sizeClass == .compact {
-            switch density {
-            case .dense: return 24
-            case .default: return 32
-            case .spacious: return 40
-            }
-        } else {
-            switch density {
-            case .dense: return 48
-            case .default: return 64
-            case .spacious: return 80
-            }
-        }
-    }
-
-    /// stackSpaceRespSm - responsive spacing, varies by SizeClass and density mode
-    public var stackSpaceRespSm: CGFloat {
-        if sizeClass == .compact {
-            switch density {
-            case .dense: return 6
-            case .default: return 8
-            case .spacious: return 10
-            }
-        } else {
-            switch density {
-            case .dense: return 12
-            case .default: return 16
-            case .spacious: return 20
-            }
-        }
-    }
-
-    /// stackSpaceRespXl - responsive spacing, varies by SizeClass and density mode
-    public var stackSpaceRespXl: CGFloat {
-        if sizeClass == .compact {
-            switch density {
-            case .dense: return 16
-            case .default: return 24
-            case .spacious: return 28
-            }
-        } else {
-            switch density {
-            case .dense: return 28
-            case .default: return 40
-            case .spacious: return 48
-            }
-        }
-    }
-}
-
-// MARK: - Environment Integration
-
-private struct DesignSystemThemeKey: EnvironmentKey {
-    static let defaultValue = DesignSystemTheme.shared
-}
-
-public extension EnvironmentValues {
-    var designSystemTheme: DesignSystemTheme {
-        get { self[DesignSystemThemeKey.self] }
-        set { self[DesignSystemThemeKey.self] = newValue }
-    }
-}
-
-// MARK: - View Modifier
-
-public extension View {
-    /// Apply design system theme with dual-axis brand selection
-    /// - Parameters:
-    ///   - colorBrand: Brand for colors and effects (BILD or SportBILD)
-    ///   - contentBrand: Brand for sizing, typography, layout (BILD, SportBILD, or Advertorial)
-    ///   - darkTheme: Enable dark mode
-    ///   - sizeClass: Size class for responsive layouts
-    ///   - density: UI density mode
-    func designSystemTheme(
-        colorBrand: ColorBrand = .bild,
-        contentBrand: ContentBrand = .bild,
-        darkTheme: Bool = false,
-        sizeClass: SizeClass = .compact,
-        density: Density = .default
-    ) -> some View {
-        let theme = DesignSystemTheme(
-            colorBrand: colorBrand,
-            contentBrand: contentBrand,
-            isDarkTheme: darkTheme,
-            sizeClass: sizeClass,
-            density: density
-        )
-        return self.environment(\.designSystemTheme, theme)
-    }
-}