/** * @theme Apple Liquid Glass * @description Premium glass morphism design with translucent effects and blur * @author Tanuki UI * @version 1.0.0 * @category Modern */ :root { /* Design System Foundation */ color-scheme: light; /* Base Scale System (em units - relative to context) */ --base-unit: 0.25em; --scale-xs: calc(var(--base-unit) * 1); /* 0.25em */ --scale-sm: calc(var(--base-unit) * 2); /* 0.5em */ --scale-md: calc(var(--base-unit) * 3); /* 0.75em */ --scale-lg: calc(var(--base-unit) * 4); /* 1em */ --scale-xl: calc(var(--base-unit) * 5); /* 1.25em */ --scale-2xl: calc(var(--base-unit) * 6); /* 1.5em */ --scale-3xl: calc(var(--base-unit) * 8); /* 2em */ /* Typography Scale (em for context-aware scaling) */ --text-xs: 0.75em; --text-sm: 0.95em; --text-base: 1em; --text-lg: 1.125em; --text-xl: 1.25em; /* Radius Scale (em for proportional scaling) */ --radius-xs: 0.25em; --radius-sm: 0.375em; --radius-md: 0.5em; --radius-lg: 0.75em; --radius-xl: 1em; /* Spacing Scale (em for context-aware spacing) */ --space-xs: 0.25em; --space-sm: 0.5em; --space-md: 0.75em; --space-lg: 1em; --space-xl: 1.5em; --space-2xl: 2em; /* Enhanced backdrop-filter support */ --supports-backdrop-filter: blur(0.0625em); /* Liquid Glass filter integration */ --backdropFilterRef: url(#liquid-glass-filter); --liquidGlassBackdropStrong: var(--backdropFilterRef); --liquidGlassBackdropMedium: none; --liquidGlassBackdropSoft: blur(14px) saturate(1.04); --liquidGlassSheen: rgba(255, 255, 255, 0.5); --liquidGlassEdgeTint: color-mix(in srgb, rgba(255, 255, 255, 0.4) 90%, rgba(0, 122, 255, 0.2) 10%); --liquidGlassAmbient: color-mix(in srgb, rgba(255, 255, 255, 0.2) 88%, rgba(0, 122, 255, 0.1) 12%); --liquidGlassShadowSoft: 0 16px 36px rgba(15, 35, 70, 0.12); --liquidGlassShadowLifted: 0 26px 64px rgba(10, 28, 60, 0.16); --liquidGlassOverlay: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 100%); /* Advanced color mixing */ --glass-tint: color-mix(in srgb, rgba(255, 255, 255, 0.94) 92%, transparent); --accent-tint: color-mix(in srgb, rgba(0, 122, 255, 0.72) 12%, transparent); --accent-glow: color-mix(in srgb, rgba(0, 122, 255, 0.82) 65%, rgba(255, 255, 255, 0.7) 35%); --wallpaper-tint: color-mix(in srgb, rgba(255, 255, 255, 0.92) 92%, rgba(0, 122, 255, 0.65) 8%); /* Dynamic contrast ratios */ --high-contrast-text: rgba(0, 0, 0, 0.95); --medium-contrast-text: rgba(0, 0, 0, 0.7); --low-contrast-text: rgba(0, 0, 0, 0.45); /* Fonts */ --themeDefaultFontFamily: "SF Pro Text", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", "Arial", sans-serif; --themeControlFontFamily: "SF Pro Text", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", "Arial", sans-serif; --themeUtilityWindowTitleFont: normal normal 400 var(--text-lg)/1.4 "Lucida Grande", sans-serif; --themeLabelFontFamily: -apple-system, "San Francisco", BlinkMacSystemFont, "Sanfransisco", "Open Sans", "Helvetica Neue", sans-serif; --themeSystemFont: normal normal 400 var(--text-xs)/1.6 "Lucida Grande", sans-serif; --textFont: normal normal 400 var(--text-sm)/1.4 var(--themeLabelFontFamily); /* Base Colors - Liquid Glass Theme */ --textColor: rgba(12, 18, 27, 0.9); --accentColor: rgba(0, 122, 255, 1); --cautionColor: rgba(255, 59, 48, 1); accent-color: var(--accentColor); /* Liquid Glass Window - Enhanced */ --windowBackgroundColor: rgba(245, 247, 255, 0.62); --windowBackdropFilter: blur(24px) saturate(1.1); --windowFilter: var(--backdropFilterRef); --windowBoxShadow: 0 0 0 0.5px color-mix(in srgb, rgba(255, 255, 255, 0.6) 90%, rgba(0, 122, 255, 0.5) 10%), 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 34px rgba(8, 20, 45, 0.08), 0 24px 86px rgba(8, 20, 45, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.38); /* Liquid Glass Text Colors - Refined */ --labelColor: rgba(12, 18, 27, 0.9); --secondaryLabelColor: rgba(24, 32, 44, 0.66); --tertiaryLabelColor: rgba(28, 40, 54, 0.45); --quaternaryLabelColor: rgba(28, 40, 54, 0.26); --placeholderTextColor: rgba(28, 40, 54, 0.45); --selectedTextColor: rgba(0, 0, 0, 0.95); --textBackgroundColor: rgba(255, 255, 255, 0.3); --selectedTextBackgroundColor: rgba(0, 122, 255, 0.25); --keyboardFocusIndicatorColor: rgba(0, 122, 255, 0.5); --unemphasizedSelectedTextColor: rgba(0, 0, 0, 0.8); --unemphasizedSelectedTextBackgroundColor: rgba(255, 255, 255, 0.2); --linkColor: rgba(0, 122, 255, 0.95); --separatorColor: rgba(0, 0, 0, 0.15); --selectedContentBackgroundColor: rgba(0, 122, 255, 0.3); --unemphasizedSelectedContentBackgroundColor: rgba(255, 255, 255, 0.25); --selectedMenuItemTextColor: rgba(255, 255, 255, 0.95); --gridColor: rgba(0, 0, 0, 0.1); --headerTextColor: rgba(0, 0, 0, 0.9); /* Liquid Glass Controls */ --controlAccentColor: rgba(0, 122, 255, 1); --controlColor: rgba(255, 255, 255, 0.6); --controlTextColor: rgba(18, 24, 34, 0.9); --disabledControlTextColor: rgba(18, 24, 34, 0.28); --selectedControlColor: rgba(0, 122, 255, 0.3); --selectedControlTextColor: rgba(0, 0, 0, 1); --alternateSelectedControlTextColor: rgba(255, 255, 255, 1); --scrubberTexturedBackgroundColor: rgba(255, 255, 255, 0.8); --windowFrameTextColor: rgba(0, 0, 0, 0.85); --underPageBackgroundColor: rgba(0, 0, 0, 0.1); --findHighlightColor: rgba(255, 255, 0, 0.6); --highlightColor: rgba(255, 255, 255, 0.8); --shadowColor: rgba(0, 0, 0, 0.3); /* System Colors with Enhanced Glass Effect */ --systemBrownColor: rgba(162, 132, 94, 0.85); --systemGrayColor: rgba(142, 142, 147, 0.85); --systemGreenColor: rgba(40, 205, 65, 0.85); --systemIndigoColor: rgba(88, 86, 214, 0.85); --systemOrangeColor: rgba(255, 149, 0, 0.85); --systemPinkColor: rgba(255, 45, 85, 0.85); --systemPurpleColor: rgba(175, 82, 222, 0.85); --systemRedColor: rgba(255, 59, 48, 0.85); --systemTealColor: rgba(85, 190, 240, 0.85); --systemYellowColor: rgba(255, 204, 0, 0.85); --systemBlueColor: rgba(0, 122, 255, 0.85); /* Window Controls - Enhanced Glass Buttons */ --windowCloseButtonBackground: radial-gradient(circle, rgba(255, 69, 58, 0.9) 0%, rgba(255, 59, 48, 0.8) 100%); --windowExpandButtonBackground: radial-gradient(circle, rgba(255, 214, 10, 0.9) 0%, rgba(255, 204, 0, 0.8) 100%); --windowFullscreenButtonBackground: radial-gradient(circle, rgba(50, 215, 75, 0.9) 0%, rgba(40, 205, 65, 0.8) 100%); --windowButtonBoxShadow: 0 0 0 0.5px rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4); --windowButtonHoverBoxShadow: 0 0 0 0.5px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.6); /* Scrollbar - Liquid Glass */ --scrollBarBackgroundColor: rgba(255, 255, 255, 0.05); --scrollBarThumbColor: rgba(0, 0, 0, 0.2); --activeScrollBarThumbColor: rgba(0, 0, 0, 0.35); --scrollBarThumbBackdropFilter: blur(0.625em) saturate(1.4); /* Table - Glass Data Grid */ --tableFont: var(--textFont, normal normal 400 13px/1.230769 var(--themeLabelFontFamily)); --tableLetterSpacing: var(--textLetterSpacing, 0); --tableBackground: var(--tableBackgroundColor, var(--windowBackgroundColor, transparent)); --tableBorderSpacing: 0; --tableBorderRadius: var(--cardBorderRadius, 0); --tableBoxShadow: var(--cardBoxShadow, none); --tableHeaderPadding: var(--tableCellPadding, 0 0.5em); --tableHeaderTextAlign: left; --tableHeaderLetterSpacing: var(--labelLetterSpacing, 0); --tableHeaderHeight: var(--tableHeaderMinHeight, var(--tableCellMinHeight, 24px)); --tableHeaderBackground: var(--tableHeaderGradient, var(--tableHeaderBackgroundColor, transparent)); --tableHeaderDivider: 1px solid rgba(0, 0, 0, 0.08); --tableHeaderDividerOffsetX: 0; --tableHeaderDividerOffsetY: 50%; --tableHeaderDividerHeight: 1em; --tableHeaderDividerOpacity: 1; --tableHeaderStickyBackground: var(--tableHeaderBackground); --tableHeaderBackdropFilter: var(--backgroundBackdropFilter, none); --tableHeaderStickyShadow: var(--tableHeaderBoxShadow, var(--tableBoxShadow, none)); --tableRowBackground: var(--tableRowBackgroundColor, var(--tableBackground, transparent)); --tableRowAlternateBackground: var(--tableRowAlternateBackgroundColor, var(--tableRowBackground)); --tableRowHoverBackground: var(--tableHoverBackground, var(--tableRowAlternateBackground)); --tableRowHoverTextColor: var(--tableHoverTextColor, var(--tableRowTextColor, inherit)); --tableRowSelectedBackground: var(--tableRowSelectedBackgroundColor, var(--tableRowHoverBackground)); --tableRowSelectedTextColor: var(--tableHoverTextColor, var(--tableRowTextColor, inherit)); --tableRowTransition: background-color 0.2s ease, color 0.2s ease; --tableCellLetterSpacing: var(--tableLetterSpacing, 0); --tableBackgroundColor: rgba(255, 255, 255, 0.08); --tableBackdropFilter: blur(1.5625em) saturate(1.4) brightness(1.05); --tableBorderColor: rgba(0, 0, 0, 0.1); --tableBorderWidth: 1px; --tableBorderStyle: solid; --tableHeaderTextColor: rgba(0, 0, 0, 0.9); --tableHeaderBackgroundColor: rgba(255, 255, 255, 0.15); --tableHeaderBorderColor: rgba(0, 0, 0, 0.08); --tableHeaderBorderWidth: 1px; --tableHeaderBorderStyle: solid; --tableRowTextColor: rgba(0, 0, 0, 0.85); --tableRowBackgroundColor: rgba(255, 255, 255, 0.05); --tableRowBorderColor: rgba(0, 0, 0, 0.06); --tableRowAlternateTextColor: rgba(0, 0, 0, 0.8); --tableRowAlternateBackgroundColor: rgba(255, 255, 255, 0.1); --tableRowAlternateBorderColor: rgba(0, 0, 0, 0.08); --tableCellBorder: 1px solid rgba(0, 0, 0, 0.06); --tableCellBorderWidth: 1px; --tableCellBorderStyle: solid; /* Card - Liquid Glass */ --cardBackground: rgba(245, 248, 255, 0.74); --cardBackdropFilter: blur(40px) saturate(1.15); --cardBorder: 1px solid rgba(255, 255, 255, 0.62); --cardBorderRadius: 34px; --cardPadding: 20px; --cardBoxShadow: var(--cardBoxShadowAdvanced, 0 18px 56px rgba(12, 26, 48, 0.2)); --cardFilter: var(--backdropFilterRef); --cardHoverBackground: rgba(255, 255, 255, 0.18); --cardHoverBorder: 0.5px solid rgba(255, 255, 255, 0.6); --cardHoverBoxShadow: 0 0 0 0.5px rgba(255, 255, 255, 0.8), 0 8px 24px rgba(0, 0, 0, 0.12); --cardActiveBackground: rgba(255, 255, 255, 0.1); --cardActiveBoxShadow: 0 0 0 0.5px rgba(255, 255, 255, 0.6), 0 4px 16px rgba(0, 0, 0, 0.1); --cardFocusBorder: 1px solid rgba(255, 255, 255, 0.8); --cardFocusBoxShadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 12px 40px rgba(0, 0, 0, 0.18); --cardDisabledBackground: rgba(255, 255, 255, 0.06); --cardDisabledOpacity: 0.65; --cardBackground--elevated: rgba(245, 248, 255, 0.82); --cardBoxShadow--elevated: 0 24px 72px rgba(12, 26, 48, 0.22); --cardBackground--outlined: rgba(245, 248, 255, 0.62); --cardBorder--outlined: 1px solid rgba(255, 255, 255, 0.66); --cardBackground--filled: rgba(245, 248, 255, 0.78); --cardBoxShadow--filled: none; /* Dialog - Enhanced Liquid Glass */ --dialogBackground: rgba(245, 245, 245, 0.68); --dialogBackdropFilter: blur(40px) saturate(1.25); --dialogBoxShadow: 0 0 0 0.5px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.08), 0 32px 128px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.2); /* Controls - Enhanced Glass Morphism */ --controlBoxShadow: 0 0 0 0.5px rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.14), 0 12px 28px rgba(12, 28, 60, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75); --controlFocusBoxShadow: 0 0 0 0.5px rgba(255, 255, 255, 0.82), 0 0 0 2px rgba(0, 122, 255, 0.28), 0 0 0 4px rgba(0, 122, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92); --controlTextFont: normal normal 600 0.95em/1.3 var(--themeControlFontFamily); --controlBorderRadius: 24px; --controlPadding: 12px 28px; --controlTextLetterSpacing: -0.2px; --controlBackground: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.18) 100%); --controlBackdropFilter: var(--liquidGlassBackdropMedium); --controlFilter: var(--backdropFilterRef); --controlSurfaceSheen: var(--liquidGlassSheen); --backgroundBackdropFilter: blur(28px) saturate(1.1); /* Button Primary - Liquid Glass */ --controlBoxShadow--primary: 0 12px 32px rgba(10, 40, 86, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78); --controlBackground--primary: rgba(0, 122, 255, 0.85); --controlBackdropFilter--primary: var(--liquidGlassBackdropStrong); --controlTextColor--primary: rgba(255, 255, 255, 0.95); --controlHoverTextColor--primary: rgba(255, 255, 255, 1); --controlHoverBackground--primary: var(--controlBackground--primary); --controlFocusBackground--primary: var(--controlBackground--primary); --controlFocusTextColor--primary: rgba(255, 255, 255, 1); /* Button Secondary - Refined Glass */ --controlBoxShadow--secondary: 0 10px 28px rgba(9, 32, 64, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8); --controlBackground--secondary: linear-gradient(180deg, rgba(255, 255, 255, 0.68) 0%, rgba(242, 244, 250, 0.46) 100%); --controlBackdropFilter--secondary: var(--liquidGlassBackdropMedium); --controlTextColor--secondary: rgba(0, 0, 0, 0.9); /* Input - Glass Field */ --inputPadding: var(--controlPadding); --inputBoxShadow: 0 10px 26px rgba(12, 26, 48, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8); --inputBorder: 1px solid rgba(255, 255, 255, 0.6); --inputFont: normal normal 500 var(--text-base)/1.4 var(--themeControlFontFamily); --inputBackground: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(240, 244, 254, 0.44) 100%); --inputBackdropFilter: blur(28px) saturate(1.1); --inputBorderRadius: 24px; --inputFilter: var(--backdropFilterRef); --inputSurfaceSheen: var(--liquidGlassSheen); --inputLabelColor: var(--secondaryLabelColor); --inputHelperTextColor: rgba(18, 24, 34, 0.48); --inputPlaceholderColor: var(--placeholderTextColor); --selectBoxSplitButtonWidth: 1.25em; --selectBoxSplitButtonBorderColor: rgba(0, 0, 0, 0.2); --selectBoxSplitButtonBorderWidth: 1px; /* Checkbox */ --checkboxSize: 1em; /* Toolbar - Glass Interface */ --barItemsFontFamily: var(--themeLabelFontFamily); --barItemsTextColor: rgba(0, 0, 0, 0.9); --barItemsLabelTextColor: rgba(0, 0, 0, 0.7); --barItemsDisabledLabelTextColor: rgba(0, 0, 0, 0.35); --barItemsDisabledLabelBackgroundColor: rgba(0, 0, 0, 0.03); --barItemsBorderRadius: calc(var(--space-lg) * 1.8); --barItemsControlMarkerBorderRadius: calc(var(--space-lg) * 1.6); --barItemsControlPlaceholderTextColor: rgba(0, 0, 0, 0.55); --barItemsControlMarkerBackgroundColor: rgba(255, 255, 255, 0.4); --barItemsControlsBorder: 0.5px solid color-mix(in srgb, rgba(255, 255, 255, 0.42) 88%, var(--accentColor) 12%); --barItemsSegmentControlBackground: rgba(255, 255, 255, 0.2); --barItemsHoverSegmentControlBackground: rgba(255, 255, 255, 0.28); --barItemsActiveSegmentControlBackground: rgba(255, 255, 255, 0.36); --segmentControlBackgroundColor: rgba(255, 255, 255, 0.68); --barItemsBackdropFilter: var(--liquidGlassBackdropMedium); --barItemsFilter: var(--backdropFilterRef); --barItemsSurfaceSheen: var(--liquidGlassSheen); --barItemsShadow: var(--liquidGlassShadowSoft); --sidebarListItemFont: normal normal 400 var(--text-sm)/1.4 var(--themeDefaultFontFamily); --sidebarListItemBorderRadius: var(--radius-md); --selectedSidebarListItemBackground: rgba(0, 0, 0, 0.1); --selectedSidebarListItemTextColor: rgba(0, 0, 0, 0.9); --sidebarListItemTextColor: rgba(0, 0, 0, 0.85); --selectedSidebarListItemMarker: none; /* Sidebar Section Title */ --sidebarSectionTitleFont: var(--labelFont); --sidebarSectionTitleLetterSpacing: 0.02em; --sidebarSectionTitleMargin: 16px 0 4px 0; --sidebarSectionTitlePadding: 0 8px; --sidebarSectionTitleColor: var(--tertiaryLabelColor); --sidebarSectionTitleBackground: transparent; --sidebarSectionTitleBorderRadius: 0; --sidebarSectionTitleTextTransform: uppercase; --appMainToolbarFloatingBackground: color-mix(in srgb, rgba(255, 255, 255, 0.12) 70%, var(--wallpaper-tint) 30%); --appMainToolbarFloatingBackdropFilter: var(--liquidGlassBackdropStrong); --appMainToolbarFloatingFilter: var(--backdropFilterRef); --appMainToolbarFloatingBoxShadow: 0 0 0 0.5px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 16px rgba(0, 0, 0, 0.06), 0 16px 64px rgba(0, 0, 0, 0.1); /* Tab item - Floating Glass */ --tabBarBackground: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.1) 100%); --tabBarBackdropFilter: var(--liquidGlassBackdropMedium); --tabBarFilter: var(--backdropFilterRef); --tabBarBoxShadow: 0 0 0 0.5px rgba(255, 255, 255, 0.62), 0 12px 34px rgba(10, 26, 55, 0.14); --tabBarBorderRadius: calc(var(--space-lg) * 3.1); --tabBarPadding: 0.35em 0.65em; --tabBarGap: 0.4em; --tabItemHeight: 3.1em; --tabItemMinWidth: 4.5em; --tabItemTextColor: rgba(18, 26, 38, 0.54); --tabItemIconColor: rgba(18, 26, 38, 0.6); --tabItemIconSize: 1.15em; --tabItemLabelFont: normal normal 500 0.78em/1.15 var(--themeLabelFontFamily); --tabItemBoxShadow: none; --tabBarLayout: center; --tabItemBackground-selected: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 248, 255, 0.58) 100%); --tabItemBackdropFilter-selected: var(--liquidGlassBackdropSoft); --tabItemFilter-selected: var(--backdropFilterRef); --tabItemBoxShadow-selected: 0 0 0 0.5px rgba(255, 255, 255, 0.68), 0 8px 26px rgba(10, 28, 60, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.65); --tabItemTextColor-selected: color-mix(in srgb, rgba(0, 122, 255, 0.82) 45%, rgba(12, 18, 27, 0.9) 55%); --tabItemIconColor-selected: color-mix(in srgb, rgba(0, 122, 255, 0.9) 60%, rgba(12, 18, 27, 0.6) 40%); --tabItemLabelUppercase: none; --tabItemIndicatorGlow: 0 12px 24px rgba(0, 122, 255, 0.18); --tabItemBadgeBackground: var(--accent-glow); --tabItemHighlightOverlay: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.1) 65%, rgba(125, 160, 210, 0.12) 100%); --scrolledAppMainToolbarBoxShadow: 0 0 0 0.5px color-mix(in srgb, rgba(255, 255, 255, 0.55) 60%, var(--accentColor) 40%), 0 4px 16px rgba(0, 0, 0, 0.08), 0 24px 72px rgba(0, 0, 0, 0.14); --appMainToolbarHeight: 3.125em; --appMainToolbarCollapsedHeight: 2.625em; /* Liquid Glass Filter Design Tokens */ --controlBackgroundFilter: var(--backdropFilterRef); --windowBackgroundFilter: var(--backdropFilterRef); --dialogBackgroundFilter: var(--backdropFilterRef); --segmentBackgroundFilter: var(--backdropFilterRef); /* SegmentControl - Fluid Glass */ --segmentControlPadding: var(--space-xs); --segmentControlSegmentPadding: var(--space-sm) calc(var(--space-lg) * 1.1); --segmentControlBoxShadow: 0 0 0 0.5px color-mix(in srgb, rgba(255, 255, 255, 0.58) 88%, var(--accentColor) 12%), 0 1px 3px rgba(0, 0, 0, 0.03), 0 6px 24px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.08); --segmentControlBackground: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.08) 100%); --segmentControlBackdropFilter: var(--liquidGlassBackdropSoft); --segmentControlFilter: var(--backdropFilterRef); --segmentControlBorderRadius: calc(var(--space-lg) * 2.1); --segmentControlIndicatorBorderRadius: calc(var(--space-lg) * 1.9); --segmentControlIndicatorBoxShadow: 0 0 0 0.5px color-mix(in srgb, rgba(255, 255, 255, 0.7) 82%, var(--accentColor) 18%), 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 36px rgba(0, 0, 0, 0.12), inset 0 1px 0 var(--liquidGlassSheen); --segmentControlIndicatorBorder: 1px solid rgba(255, 255, 255, 0.3); --segmentControlIndicatorBackground: linear-gradient(180deg, rgba(107, 206, 255, 0.46) 0%, rgba(65, 160, 255, 0.28) 100%); --segmentControlIndicatorBackdropFilter: var(--liquidGlassBackdropMedium); --segmentControlIndicatorFilter: var(--backdropFilterRef); --segmentControlIndicatorOverlay: var(--liquidGlassOverlay); --segmentControlIndicatorShadow: var(--liquidGlassShadowSoft); --segmentControlLabelColor: rgba(18, 24, 34, 0.52); --segmentControlLabelActiveColor: color-mix(in srgb, rgba(0, 122, 255, 0.85) 62%, rgba(12, 18, 27, 0.9) 38%); --segmentControlLabelFont: normal normal 600 0.95em/1.25 var(--themeControlFontFamily); /* Enhanced Elevations with Advanced Shadows */ --windowLevelElevation: 128; --windowBoxShadowAdvanced: 0 0 0 0.5px rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 16px rgba(0, 0, 0, 0.04), 0 16px 64px rgba(0, 0, 0, 0.08), 0 32px 128px rgba(0, 0, 0, 0.12); --dialogLevelElevation: 128; --dialogBoxShadowAdvanced: 0 0 0 0.5px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.08), 0 32px 128px rgba(0, 0, 0, 0.16); --dialogFilter: var(--backdropFilterRef); --popupLevelElevation: 32; --popupBackdropFilter: blur(40px) saturate(1.18); --popupFilter: var(--backdropFilterRef); --popupBoxShadow: 0 24px 80px rgba(12, 26, 48, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55); --tooltipLevelElevation: 16; --tooltipBoxShadow: 0 12px 32px rgba(12, 26, 48, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5); --cardLevelElevation: 8; --cardBoxShadowAdvanced: 0 0 0 0.5px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.06); --controlsLevelElevation: 2; --controlsBoxShadowAdvanced: 0 0 0 0.5px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.04); --layerLevelElevation: 1; --hoverLevelElevation: 2; --activeLevelElevation: 1; } :root[data-theme='apple-liquid-glass-dark'], html[data-theme='apple-liquid-glass-dark'] { --windowBackgroundColor: rgba(16, 18, 28, 0.72); --windowBackdropFilter: blur(40px) saturate(1.1); --textColor: rgba(245, 247, 255, 0.92); --labelColor: rgba(245, 247, 255, 0.88); --secondaryLabelColor: rgba(210, 220, 240, 0.7); --tertiaryLabelColor: rgba(180, 190, 210, 0.5); --placeholderTextColor: rgba(180, 190, 210, 0.45); --controlTextColor: rgba(245, 247, 255, 0.9); --controlTextColor--primary: rgba(255, 255, 255, 0.96); --controlTextColor--secondary: rgba(235, 240, 255, 0.88); --controlBackground: linear-gradient(180deg, rgba(32, 38, 58, 0.64) 0%, rgba(20, 24, 40, 0.48) 100%); --controlBackground--primary: linear-gradient(180deg, rgba(58, 128, 255, 0.86) 0%, rgba(32, 88, 220, 0.74) 100%); --controlBackground--secondary: linear-gradient(180deg, rgba(42, 50, 72, 0.58) 0%, rgba(28, 34, 52, 0.46) 100%); --cardBackground: rgba(32, 36, 52, 0.72); --cardBackground--elevated: rgba(36, 44, 68, 0.82); --cardBackground--outlined: rgba(30, 36, 56, 0.62); --cardBackground--filled: rgba(38, 46, 70, 0.76); --cardBorder: 1px solid rgba(255, 255, 255, 0.32); --inputBackground: linear-gradient(180deg, rgba(42, 50, 68, 0.64) 0%, rgba(28, 34, 48, 0.44) 100%); --inputBorder: 1px solid rgba(255, 255, 255, 0.34); --popupBackdropFilter: blur(40px) saturate(1.1); --dialogBackground: rgba(28, 30, 44, 0.76); --dialogBackdropFilter: blur(40px) saturate(1.08); } /* Scrollbar with liquid glass effect */ body ::-webkit-scrollbar { width: 0.5em; height: 0.5em; background: transparent; } body ::-webkit-scrollbar-corner { background: transparent; user-select: none; } body ::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--radius-xs); backdrop-filter: blur(0.625em); } body ::-webkit-scrollbar-track { background: transparent; transition: background 0.3s ease; } body *:hover> ::-webkit-scrollbar-thumb { background: var(--scrollBarThumbColor); backdrop-filter: var(--scrollBarThumbBackdropFilter); transition: all 0.3s ease; } body ::-webkit-scrollbar-thumb:hover { background: var(--activeScrollBarThumbColor); backdrop-filter: blur(0.9375em) saturate(1.6); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1); }