/**
 * @theme Vercel
 * @description Geist-based palette with official neutral/brand tokens and typography updates
 * @author Tanuki UI
 * @version 1.1.0
 * @category Developer
 */

:root {
  /* Typography - Geist is Vercel's primary UI typeface */
  --themeDefaultFontFamily: "Geist", "Geist Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Helvetica Neue", "Arial", sans-serif;
  --themeControlFontFamily: var(--themeDefaultFontFamily);
  --themeLabelFontFamily: var(--themeDefaultFontFamily);
  --themeSystemFont: normal normal 400 14px/1.5 var(--themeDefaultFontFamily);
  --textFont: normal normal 400 14px/1.6 var(--themeDefaultFontFamily);
  --labelFont: normal normal 500 12px/1.4 var(--themeDefaultFontFamily);

  /* Geist neutral accents (accents_1 – accents_8) */
  --geistAccent0: #ffffff;
  --geistAccent1: #fafafa;
  --geistAccent2: #eaeaea;
  --geistAccent3: #999999;
  --geistAccent4: #888888;
  --geistAccent5: #666666;
  --geistAccent6: #444444;
  --geistAccent7: #333333;
  --geistAccent8: #111111;
  --geistForeground: #000000;

  /* Geist status scales */
  --geistSuccessLighter: #d3e5ff;
  --geistSuccessLight: #3291ff;
  --geistSuccess: #0070f3;
  --geistSuccessDark: #0761d1;
  --geistErrorLighter: #f7d4d6;
  --geistErrorLight: #ff1a1a;
  --geistError: #e00000;
  --geistErrorDark: #c50000;
  --geistWarningLighter: #ffefcf;
  --geistWarningLight: #f7b955;
  --geistWarning: #f5a623;
  --geistWarningDark: #ab570a;
  --geistCyanLighter: #aaffec;
  --geistCyanLight: #79ffe1;
  --geistCyan: #50e3c2;
  --geistCyanDark: #29bc9b;
  --geistVioletLighter: #e3d7fc;
  --geistVioletLight: #8a63d2;
  --geistViolet: #7928ca;
  --geistVioletDark: #4c2889;
  --geistAlert: #ff0080;
  --geistPurple: #f81ce5;
  --geistMagenta: #eb367f;

  /* Core semantic tokens */
  --textColor: var(--geistForeground);
  --labelColor: var(--textColor);
  --secondaryLabelColor: var(--geistAccent5);
  --tertiaryLabelColor: var(--geistAccent4);
  --quaternaryLabelColor: var(--geistAccent3);
  --placeholderTextColor: var(--geistAccent3);
  --headerTextColor: var(--geistForeground);
  --accentColor: var(--geistSuccess);
  --cautionColor: var(--geistError);
  --successColor: var(--geistSuccess);
  --warningColor: var(--geistWarning);
  --infoColor: var(--geistCyan);
  --linkColor: var(--geistSuccess);
  --highlightColor: var(--geistAccent0);
  --findHighlightColor: var(--geistCyanLight);
  accent-color: var(--accentColor);

  /* Surfaces & backgrounds */
  --windowBackgroundColor: var(--geistAccent0);
  --backgroundSecondary: var(--geistAccent1);
  --backgroundTertiary: var(--geistAccent2);
  --backgroundCode: color-mix(in srgb, var(--geistViolet) 12%, var(--geistAccent0));
  --backgroundHover: color-mix(in srgb, var(--geistAccent2) 60%, transparent);
  --backgroundActive: color-mix(in srgb, var(--geistAccent3) 30%, transparent);
  --backgroundBackdropFilter: none;
  --windowBackdropFilter: none;
  --windowBoxShadow: 0 18px 48px color-mix(in srgb, var(--geistAccent8) 12%, transparent);

  /* Window Buttons */
  --themeUtilityWindowTitleFont: normal normal 600 13px/1.4 var(--themeDefaultFontFamily);
  --windowButtonBoxShadow: none;
  --windowCloseButtonBackground: #ff5f56;
  --windowExpandButtonBackground: #ffbd2e;
  --windowFullscreenButtonBackground: #27c93f;

  /* Scrollbar */
  --scrollBarBackgroundColor: transparent;
  --scrollBarThumbColor: color-mix(in srgb, var(--geistAccent5) 20%, transparent);
  --activeScrollBarThumbColor: color-mix(in srgb, var(--geistAccent5) 35%, transparent);

  /* Selection */
  --textBackgroundColor: var(--windowBackgroundColor);
  --selectedTextColor: var(--geistAccent0);
  --selectedTextBackgroundColor: var(--geistSuccess);
  --selectedContentBackgroundColor: var(--geistSuccess);
  --unemphasizedSelectedTextColor: var(--textColor);
  --unemphasizedSelectedTextBackgroundColor: var(--geistAccent2);
  --unemphasizedSelectedContentBackgroundColor: var(--geistAccent2);
  --selectedMenuItemTextColor: var(--geistAccent0);
  --keyboardFocusIndicatorColor: color-mix(in srgb, var(--geistSuccessLight) 35%, transparent);
  --separatorColor: var(--geistAccent2);
  --gridColor: var(--geistAccent2);

  /* Controls */
  --controlAccentColor: var(--accentColor);
  --controlColor: var(--windowBackgroundColor);
  --controlBackgroundColor: var(--controlColor);
  --controlTextColor: var(--textColor);
  --controlActiveTextColor: var(--geistAccent0);
  --disabledControlTextColor: var(--geistAccent3);
  --selectedControlColor: color-mix(in srgb, var(--geistSuccessLighter) 50%, transparent);
  --selectedControlTextColor: var(--textColor);
  --alternateSelectedControlTextColor: var(--geistAccent0);
  --scrubberTexturedBackgroundColor: var(--windowBackgroundColor);
  --windowFrameTextColor: var(--textColor);
  --underPageBackgroundColor: var(--geistAccent1);
  --shadowColor: rgba(0, 0, 0, 0.12);

  /* Table */
  --tableFont: var(--textFont);
  --tableLetterSpacing: normal;
  --tableBackground: var(--windowBackgroundColor);
  --tableBorderSpacing: 0;
  --tableBorderRadius: 8px;
  --tableBoxShadow: none;
  --tableHeaderPadding: 0 0.75em;
  --tableHeaderTextAlign: left;
  --tableHeaderLetterSpacing: normal;
  --tableHeaderHeight: 40px;
  --tableHeaderBackground: var(--backgroundSecondary);
  --tableHeaderBackgroundColor: var(--backgroundSecondary);
  --tableHeaderDivider: 1px solid var(--separatorColor);
  --tableHeaderDividerOffsetX: 0;
  --tableHeaderDividerOffsetY: 50%;
  --tableHeaderDividerHeight: 1em;
  --tableHeaderDividerOpacity: 1;
  --tableHeaderStickyBackground: var(--backgroundSecondary);
  --tableHeaderBackdropFilter: none;
  --tableHeaderStickyShadow: inset 0 -1px 0 var(--separatorColor);
  --tableRowBackground: var(--windowBackgroundColor);
  --tableRowAlternateBackground: var(--backgroundSecondary);
  --tableRowBackgroundColor: var(--tableRowBackground);
  --tableRowAlternateBackgroundColor: var(--tableRowAlternateBackground);
  --tableRowHoverBackground: color-mix(in srgb, var(--geistAccent2) 55%, transparent);
  --tableRowHoverTextColor: var(--textColor);
  --tableRowSelectedBackground: color-mix(in srgb, var(--geistSuccessLighter) 40%, transparent);
  --tableRowSelectedTextColor: var(--textColor);
  --tableRowTransition: background-color 0.2s ease, color 0.2s ease;
  --tableCellLetterSpacing: normal;
  --tableBackgroundColor: var(--windowBackgroundColor);
  --tableBorderColor: var(--separatorColor);
  --tableBorderWidth: 1px;
  --tableBorderStyle: solid;
  --tableHeaderTextColor: var(--secondaryLabelColor);
  --tableHeaderBorderColor: var(--separatorColor);
  --tableHeaderBorderWidth: 1px;
  --tableHeaderBorderStyle: solid;
  --tableRowTextColor: var(--textColor);
  --tableRowBorderColor: var(--separatorColor);
  --tableRowAlternateTextColor: var(--textColor);
  --tableRowAlternateBorderColor: var(--separatorColor);
  --tableCellBorderWidth: 1px;
  --tableCellBorderStyle: solid;
  --tableCellBorder: 1px solid var(--separatorColor);

  /* Dialog */
  --dialogBackground: var(--windowBackgroundColor);
  --dialogBoxShadow: 0 32px 64px color-mix(in srgb, var(--geistAccent8) 16%, transparent);
  --dialogBorderRadius: 12px;

  /* Controls (Buttons, Inputs) */
  --controlBoxShadow: 0 1px 3px color-mix(in srgb, var(--geistAccent8) 10%, transparent);
  --controlFocusBoxShadow: 0 0 0 3px color-mix(in srgb, var(--geistSuccessLight) 30%, transparent);
  --controlTextFont: var(--textFont);
  --controlBorderRadius: 10px;
  --controlPadding: 10px 16px;
  --controlTextLetterSpacing: 0;
  --controlBackground: var(--windowBackgroundColor);
  --controlBorder: 1px solid var(--separatorColor);
  --controlHoverBackground: color-mix(in srgb, var(--geistAccent2) 60%, transparent);
  --controlActiveBackground: color-mix(in srgb, var(--geistAccent3) 35%, transparent);

  /* Button variants */
  --controlBoxShadow--primary: 0 12px 24px color-mix(in srgb, var(--accentColor) 18%, transparent);
  --controlBackground--primary: var(--accentColor);
  --controlTextColor--primary: var(--geistAccent0);
  --controlBorder--primary: 1px solid var(--accentColor);
  --controlHoverBackground--primary: var(--geistSuccessLight);
  --controlHoverTextColor--primary: var(--geistAccent0);
  --controlFocusBackground--primary: color-mix(in srgb, var(--accentColor) 80%, var(--geistSuccessLight) 20%);
  --controlFocusBoxShadow--primary: 0 0 0 3px color-mix(in srgb, var(--geistSuccessLighter) 55%, transparent);
  --controlFocusTextColor--primary: var(--geistAccent0);

  --controlBackground--secondary: var(--windowBackgroundColor);
  --controlTextColor--secondary: var(--textColor);
  --controlBorder--secondary: 1px solid var(--separatorColor);
  --controlHoverBackground--secondary: color-mix(in srgb, var(--geistAccent2) 50%, transparent);
  --controlBoxShadow--secondary: 0 6px 16px color-mix(in srgb, var(--geistAccent8) 12%, transparent);

  --controlBackground--danger: var(--geistError);
  --controlTextColor--danger: var(--geistAccent0);
  --controlBorder--danger: 1px solid var(--geistError);
  --controlHoverBackground--danger: var(--geistErrorLight);

  /* Inputs */
  --inputBackground: var(--windowBackgroundColor);
  --inputBorder: 1px solid var(--separatorColor);
  --inputBorderRadius: var(--controlBorderRadius);
  --inputPadding: var(--controlPadding);
  --inputFont: var(--textFont);
  --inputBoxShadow: var(--controlBoxShadow);
  --inputFocusBorder: 1px solid var(--accentColor);
  --inputFocusBoxShadow: 0 0 0 3px color-mix(in srgb, var(--geistSuccessLighter) 45%, transparent);
  --selectBoxSplitButtonWidth: 36px;
  --selectBoxSplitButtonBorderColor: var(--separatorColor);
  --selectBoxSplitButtonBorderWidth: 1px;
  --checkboxSize: 16px;

  /* Toolbar */
  --appMainToolbarFloatingBackground: color-mix(in srgb, var(--windowBackgroundColor) 90%, rgba(0, 0, 0, 0.04));
  --appMainToolbarHeight: 60px;
  --scrolledAppMainToolbarBoxShadow: 0 8px 24px color-mix(in srgb, var(--geistAccent8) 12%, transparent);
  --barItemsFontFamily: var(--themeLabelFontFamily);
  --barItemsTextColor: var(--textColor);
  --barItemsLabelTextColor: var(--secondaryLabelColor);
  --barItemsDisabledLabelTextColor: var(--tertiaryLabelColor);
  --barItemsDisabledLabelBackgroundColor: color-mix(in srgb, var(--geistAccent2) 45%, transparent);
  --barItemsBorderRadius: 12px;
  --barItemsControlMarkerBorderRadius: 8px;
  --barItemsControlPlaceholderTextColor: var(--placeholderTextColor);
  --barItemsControlMarkerBackgroundColor: color-mix(in srgb, var(--geistAccent2) 55%, transparent);
  --barItemsControlsBorder: 1px solid var(--separatorColor);
  --barItemsSegmentControlBackground: color-mix(in srgb, var(--geistAccent2) 65%, transparent);
  --barItemsHoverSegmentControlBackground: color-mix(in srgb, var(--geistAccent2) 75%, transparent);
  --barItemsActiveSegmentControlBackground: color-mix(in srgb, var(--accentColor) 12%, transparent);

  /* Segment Control */
  --segmentControlBackground: color-mix(in srgb, var(--geistAccent1) 85%, transparent);
  --segmentControlBackgroundColor: var(--segmentControlBackground);
  --segmentControlBorderRadius: 999px;
  --segmentControlPadding: 4px;
  --segmentControlSegmentPadding: 4px 12px;
  --segmentControlBoxShadow: inset 0 0 0 1px color-mix(in srgb, var(--geistAccent2) 70%, transparent);
  --segmentControlIndicatorBoxShadow: 0 6px 18px color-mix(in srgb, var(--accentColor) 24%, transparent);
  --segmentControlIndicatorBorder: 1px solid color-mix(in srgb, var(--geistAccent2) 15%, transparent);

  /* Navigation */
  --tabBarBackground: var(--windowBackgroundColor);
  --tabBarBoxShadow: inset 0 -1px 0 var(--separatorColor);
  --tabItemHeight: 44px;
  --tabItemTextColor: var(--secondaryLabelColor);
  --tabItemBoxShadow: none;
  --tabItemIconSize: 18px;
  --tabItemFont: normal normal 500 14px/1.4 var(--themeDefaultFontFamily);
  --tabBarLayout: start;
  --tabItemBackground-selected: color-mix(in srgb, var(--geistSuccessLighter) 35%, transparent);
  --tabItemBoxShadow-selected: inset 0 -2px 0 var(--accentColor);
  --tabItemTextColor-selected: var(--accentColor);
  --tabItemFont-selected: var(--tabItemFont);

  /* Sidebar */
  --sidebarBackground: var(--backgroundSecondary);
  --sidebarListItemFont: normal normal 500 14px/1.6 var(--themeDefaultFontFamily);
  --sidebarListItemBorderRadius: 12px;
  --selectedSidebarListItemBackground: color-mix(in srgb, var(--geistSuccessLighter) 50%, transparent);
  --selectedSidebarListItemTextColor: var(--accentColor);
  --selectedSidebarListItemMarker: 3px solid var(--accentColor);
  --sidebarListItemDetailsBackground: var(--backgroundSecondary);
  --sidebarListItemTextColor: var(--textColor);
  --sidebarListItemHoverBackground: color-mix(in srgb, var(--geistAccent2) 60%, transparent);
  --sidebarListItemIconSize: 18px;
  --sidebarListItemChildrenPadding: 0 0 0 24px;
  --sidebarSectionTitleColor: var(--tertiaryLabelColor);
  --sidebarSectionTitlePadding: 16px 16px 8px 16px;
  --sidebarListItemPadding: 10px 16px;
  --sidebarSectionTitleFont: var(--labelFont);
  --sidebarSectionTitleLetterSpacing: 0.08em;
  --sidebarSectionTitleMargin: 16px 0 8px 0;
  --sidebarSectionTitleBackground: transparent;
  --sidebarSectionTitleBorderRadius: 0;
  --sidebarSectionTitleTextTransform: uppercase;

  /* Cards */
  --cardBackground: var(--windowBackgroundColor);
  --cardBorder: 1px solid var(--separatorColor);
  --cardBorderWidth: 1px;
  --cardBorderColor: var(--separatorColor);
  --cardBackdropFilter: none;
  --cardBorderRadius: 16px;
  --cardBoxShadow: 0 20px 40px color-mix(in srgb, var(--geistAccent8) 10%, transparent);
  --cardPadding: 20px;
  --cardMargin: 20px;
  --cardTextColor: var(--textColor);
  --cardHeaderTextColor: var(--secondaryLabelColor);
  --cardSubtitleTextColor: var(--tertiaryLabelColor);
  --cardHoverBackground: color-mix(in srgb, var(--geistAccent1) 75%, transparent);
  --cardHoverBorderColor: color-mix(in srgb, var(--accentColor) 20%, var(--separatorColor));
  --cardHoverBorder: 1px solid var(--cardHoverBorderColor);
  --cardHoverBoxShadow: 0 28px 64px color-mix(in srgb, var(--geistAccent8) 16%, transparent);
  --cardActiveBackground: color-mix(in srgb, var(--geistSuccessLighter) 30%, transparent);
  --cardActiveBoxShadow: 0 24px 56px color-mix(in srgb, var(--accentColor) 18%, transparent);
  --cardActiveBorderColor: color-mix(in srgb, var(--accentColor) 30%, var(--separatorColor));
  --cardActiveBorder: 1px solid var(--cardActiveBorderColor);
  --cardFocusBorder: 1px solid var(--accentColor);
  --cardFocusBorderColor: var(--accentColor);
  --cardFocusBoxShadow: 0 0 0 3px color-mix(in srgb, var(--geistSuccessLighter) 60%, transparent);
  --cardDisabledBackground: var(--backgroundSecondary);
  --cardDisabledBorderColor: color-mix(in srgb, var(--separatorColor) 65%, transparent);
  --cardDisabledBorder: 1px solid var(--cardDisabledBorderColor);
  --cardDisabledBoxShadow: none;
  --cardDisabledTextColor: var(--tertiaryLabelColor);
  --cardDisabledOpacity: 0.6;
  --cardElevatedBackground: var(--windowBackgroundColor);
  --cardElevatedBorderWidth: 1px;
  --cardElevatedBoxShadow: 0 32px 80px color-mix(in srgb, var(--geistAccent8) 15%, transparent);
  --cardElevatedHoverBoxShadow: 0 40px 96px color-mix(in srgb, var(--geistAccent8) 18%, transparent);
  --cardBackground--elevated: var(--cardElevatedBackground);
  --cardBoxShadow--elevated: var(--cardElevatedBoxShadow);
  --cardBackground--outlined: transparent;
  --cardOutlinedBackground: transparent;
  --cardOutlinedBorderColor: var(--cardBorderColor);
  --cardOutlinedBorderWidth: var(--cardBorderWidth);
  --cardOutlinedBoxShadow: inset 0 0 0 1px color-mix(in srgb, var(--geistAccent2) 40%, transparent);
  --cardOutlinedHoverBackground: color-mix(in srgb, var(--geistAccent1) 85%, transparent);
  --cardOutlinedHoverBorderColor: var(--cardHoverBorderColor);
  --cardBorder--outlined: 1px solid var(--cardOutlinedBorderColor);
  --cardBackground--filled: var(--backgroundSecondary);
  --cardFilledBackground: var(--backgroundSecondary);
  --cardFilledBorderColor: transparent;
  --cardFilledBorderWidth: 0;
  --cardFilledBoxShadow: none;
  --cardFilledHoverBackground: color-mix(in srgb, var(--backgroundSecondary) 85%, transparent);
  --cardFilledActiveBackground: color-mix(in srgb, var(--accentColor) 12%, var(--backgroundSecondary));
  --cardBoxShadow--filled: var(--cardFilledBoxShadow);

  /* Popover */
  --popoverBackground: var(--windowBackgroundColor);
  --popoverBorder: 1px solid var(--separatorColor);
  --popoverBorderRadius: 12px;
  --popoverBoxShadow: 0 24px 60px color-mix(in srgb, var(--geistAccent8) 16%, transparent);

  /* System Colors */
  --systemBlueColor: var(--accentColor);
  --systemGreenColor: #17c964;
  --systemOrangeColor: var(--geistWarning);
  --systemYellowColor: var(--geistWarningLight);
  --systemRedColor: var(--geistError);
  --systemPinkColor: var(--geistAlert);
  --systemPurpleColor: var(--geistViolet);
  --systemTealColor: var(--geistCyan);
  --systemIndigoColor: #5a31f4;
  --systemGrayColor: var(--geistAccent4);
  --systemBrownColor: #a2856e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --windowBackgroundColor: #000000;
    --backgroundSecondary: #111111;
    --backgroundTertiary: #111111;
    --backgroundCode: color-mix(in srgb, var(--geistViolet) 35%, #000);
    --backgroundHover: color-mix(in srgb, #222222 60%, transparent);
    --backgroundActive: color-mix(in srgb, #333333 50%, transparent);

    --textColor: #ffffff;
    --secondaryLabelColor: color-mix(in srgb, #bbbbbb 90%, transparent);
    --tertiaryLabelColor: color-mix(in srgb, #999999 85%, transparent);
    --quaternaryLabelColor: color-mix(in srgb, #777777 80%, transparent);
    --placeholderTextColor: color-mix(in srgb, #666666 75%, transparent);
    --headerTextColor: #ffffff;
    --linkColor: var(--geistSuccessLight);
    --highlightColor: #111111;
    --findHighlightColor: color-mix(in srgb, var(--geistCyanLight) 55%, transparent);
    --textBackgroundColor: color-mix(in srgb, #0f0f0f 95%, transparent);

    --scrollBarThumbColor: color-mix(in srgb, #444444 40%, transparent);
    --activeScrollBarThumbColor: color-mix(in srgb, #555555 50%, transparent);

    --separatorColor: color-mix(in srgb, #333333 90%, transparent);
    --gridColor: color-mix(in srgb, #2a2a2a 80%, transparent);

    --selectedTextColor: var(--geistAccent0);
    --selectedTextBackgroundColor: var(--geistSuccessLight);
    --selectedContentBackgroundColor: var(--geistSuccessLight);
    --unemphasizedSelectedTextColor: var(--textColor);
    --unemphasizedSelectedTextBackgroundColor: color-mix(in srgb, #1b1b1b 85%, transparent);
    --unemphasizedSelectedContentBackgroundColor: color-mix(in srgb, #1b1b1b 85%, transparent);
    --selectedMenuItemTextColor: var(--geistAccent0);
    --keyboardFocusIndicatorColor: color-mix(in srgb, var(--geistSuccessLight) 45%, transparent);

    --controlTextColor: var(--textColor);
    --disabledControlTextColor: color-mix(in srgb, #666666 70%, transparent);
    --selectedControlColor: color-mix(in srgb, var(--geistSuccessLight) 25%, transparent);
    --selectedControlTextColor: var(--textColor);
    --alternateSelectedControlTextColor: var(--geistAccent0);

    --controlBackground: color-mix(in srgb, #0f0f0f 90%, transparent);
    --controlHoverBackground: color-mix(in srgb, #1c1c1c 80%, transparent);
    --controlActiveBackground: color-mix(in srgb, #262626 75%, transparent);
    --controlBorder: 1px solid color-mix(in srgb, #2b2b2b 85%, transparent);
    --controlBoxShadow: 0 1px 3px color-mix(in srgb, #000 60%, transparent);
    --controlFocusBoxShadow: 0 0 0 3px color-mix(in srgb, var(--geistSuccessLight) 30%, transparent);
    --controlBackgroundColor: var(--controlBackground);
    --controlActiveTextColor: var(--geistAccent0);
    --controlBoxShadow--primary: 0 10px 24px color-mix(in srgb, var(--accentColor) 32%, transparent);
    --controlBoxShadow--secondary: 0 6px 16px color-mix(in srgb, #000 45%, transparent);
    --controlFocusBackground--primary: color-mix(in srgb, var(--accentColor) 60%, transparent);
    --controlFocusTextColor--primary: var(--geistAccent0);
    --controlHoverTextColor--primary: var(--geistAccent0);

    --inputBackground: color-mix(in srgb, #0f0f0f 95%, transparent);
    --inputBorder: 1px solid color-mix(in srgb, #2f2f2f 80%, transparent);
    --inputHoverBorder: 1px solid color-mix(in srgb, #3c3c3c 75%, transparent);
    --inputFocusBorder: 1px solid var(--accentColor);
    --inputFocusBoxShadow: 0 0 0 3px color-mix(in srgb, var(--geistSuccessLight) 35%, transparent);
    --selectBoxSplitButtonBorderColor: color-mix(in srgb, #2f2f2f 80%, transparent);

    --tabBarBoxShadow: inset 0 -1px 0 color-mix(in srgb, #262626 80%, transparent);
    --tabItemTextColor: color-mix(in srgb, #bbbbbb 90%, transparent);
    --tabItemBackground-selected: color-mix(in srgb, var(--geistSuccessLight) 20%, transparent);
    --tabItemTextColor-selected: var(--geistAccent0);

    --appMainToolbarFloatingBackground: color-mix(in srgb, #0f0f0f 92%, transparent);
    --scrolledAppMainToolbarBoxShadow: 0 10px 30px color-mix(in srgb, #000 55%, transparent);
    --barItemsTextColor: var(--textColor);
    --barItemsLabelTextColor: color-mix(in srgb, #b5b5b5 85%, transparent);
    --barItemsDisabledLabelTextColor: color-mix(in srgb, #6a6a6a 80%, transparent);
    --barItemsDisabledLabelBackgroundColor: color-mix(in srgb, #1d1d1d 85%, transparent);
    --barItemsControlPlaceholderTextColor: color-mix(in srgb, #777777 75%, transparent);
    --barItemsControlMarkerBackgroundColor: color-mix(in srgb, #1f1f1f 85%, transparent);
    --barItemsControlsBorder: 1px solid color-mix(in srgb, #2d2d2d 85%, transparent);
    --barItemsSegmentControlBackground: color-mix(in srgb, #1b1b1b 85%, transparent);
    --barItemsHoverSegmentControlBackground: color-mix(in srgb, #232323 85%, transparent);
    --barItemsActiveSegmentControlBackground: color-mix(in srgb, var(--accentColor) 22%, transparent);
    --segmentControlBackground: color-mix(in srgb, #1a1a1a 90%, transparent);
    --segmentControlBackgroundColor: var(--segmentControlBackground);
    --segmentControlBoxShadow: inset 0 0 0 1px color-mix(in srgb, #2a2a2a 80%, transparent);
    --segmentControlIndicatorBoxShadow: 0 10px 24px color-mix(in srgb, var(--accentColor) 28%, transparent);

    --sidebarBackground: color-mix(in srgb, #0f0f0f 95%, transparent);
    --sidebarListItemHoverBackground: color-mix(in srgb, #1f1f1f 80%, transparent);
    --selectedSidebarListItemBackground: color-mix(in srgb, var(--geistSuccessLight) 22%, transparent);
    --selectedSidebarListItemTextColor: var(--geistAccent0);
    --sidebarSectionTitleColor: color-mix(in srgb, #999999 80%, transparent);

    --cardBackground: color-mix(in srgb, #050505 92%, transparent);
    --cardBorderColor: color-mix(in srgb, #202020 85%, transparent);
    --cardBorderWidth: 1px;
    --cardBorder: 1px solid var(--cardBorderColor);
    --cardHoverBackground: color-mix(in srgb, #161616 85%, transparent);
    --cardHoverBorderColor: color-mix(in srgb, var(--accentColor) 30%, #202020);
    --cardHoverBorder: 1px solid var(--cardHoverBorderColor);
    --cardHoverBoxShadow: 0 32px 72px color-mix(in srgb, #000 55%, transparent);
    --cardActiveBackground: color-mix(in srgb, var(--geistSuccessLight) 20%, #101010);
    --cardActiveBoxShadow: 0 28px 80px color-mix(in srgb, #000 50%, transparent);
    --cardActiveBorderColor: color-mix(in srgb, var(--accentColor) 32%, #202020);
    --cardActiveBorder: 1px solid var(--cardActiveBorderColor);
    --cardFocusBorder: 1px solid var(--accentColor);
    --cardFocusBorderColor: var(--accentColor);
    --cardFocusBoxShadow: 0 0 0 3px color-mix(in srgb, var(--geistSuccessLight) 35%, transparent);
    --cardDisabledBackground: color-mix(in srgb, #111111 80%, transparent);
    --cardDisabledBorderColor: color-mix(in srgb, #2a2a2a 80%, transparent);
    --cardDisabledBorder: 1px solid var(--cardDisabledBorderColor);
    --cardDisabledBoxShadow: none;
    --cardDisabledTextColor: color-mix(in srgb, #7a7a7a 70%, transparent);
    --cardElevatedBackground: color-mix(in srgb, #080808 96%, transparent);
    --cardElevatedBoxShadow: 0 36px 120px color-mix(in srgb, #000 58%, transparent);
    --cardElevatedHoverBoxShadow: 0 44px 140px color-mix(in srgb, #000 62%, transparent);
    --cardBackground--elevated: var(--cardElevatedBackground);
    --cardBoxShadow--elevated: var(--cardElevatedBoxShadow);
    --cardFilledBackground: color-mix(in srgb, #111111 90%, transparent);
    --cardFilledHoverBackground: color-mix(in srgb, #161616 90%, transparent);
    --cardFilledActiveBackground: color-mix(in srgb, var(--accentColor) 20%, #151515);
    --cardFilledBorderColor: transparent;
    --cardOutlinedBorderColor: color-mix(in srgb, #2d2d2d 85%, transparent);
    --cardOutlinedBoxShadow: inset 0 0 0 1px color-mix(in srgb, #2d2d2d 85%, transparent);
    --cardOutlinedHoverBackground: color-mix(in srgb, #1b1b1b 90%, transparent);
    --cardOutlinedHoverBorderColor: color-mix(in srgb, var(--accentColor) 24%, #2d2d2d);
    --popoverBackground: color-mix(in srgb, #0e0e0e 95%, transparent);
    --popoverBorder: 1px solid color-mix(in srgb, #262626 80%, transparent);
    --popoverBoxShadow: 0 32px 90px color-mix(in srgb, #000 60%, transparent);

    --tableHeaderBackgroundColor: color-mix(in srgb, #111111 95%, transparent);
    --tableRowBackgroundColor: color-mix(in srgb, #080808 96%, transparent);
    --tableRowAlternateBackgroundColor: color-mix(in srgb, #101010 92%, transparent);

    --dialogBackground: color-mix(in srgb, #0f0f0f 92%, transparent);
    --dialogBoxShadow: 0 40px 120px color-mix(in srgb, #000 65%, transparent);
  }
}

/* Scrollbar Styling */
body ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: var(--scrollBarBackgroundColor);
}

body ::-webkit-scrollbar-thumb {
  background: var(--scrollBarThumbColor);
  border-radius: 8px;
}

body ::-webkit-scrollbar-thumb:hover {
  background: var(--activeScrollBarThumbColor);
}

@media (prefers-contrast: high) {
  :root {
    --controlBorder: 2px solid currentColor;
    --inputBorder: 2px solid currentColor;
    --controlFocusBoxShadow: 0 0 0 3px var(--keyboardFocusIndicatorColor);
    --inputFocusBoxShadow: 0 0 0 3px var(--keyboardFocusIndicatorColor);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --animationDuration: 0ms;
  }
}