:root {
  /* Fonts - OpenAI uses Söhne and system fonts */
  --themeDefaultFontFamily: "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
  --themeControlFontFamily: var(--themeDefaultFontFamily);
  --themeLabelFontFamily: var(--themeDefaultFontFamily);
  --themeMonospaceFont: "Söhne Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
  --themeSystemFont: normal normal 400 14px/1.5 var(--themeDefaultFontFamily);
  --textFont: normal normal 400 14px/1.75 var(--themeDefaultFontFamily);
  --labelFont: normal normal 500 13px/1.6 var(--themeLabelFontFamily);

  /* OpenAI Color Palette - Light Mode */
  --openaiGray0: #ffffff;
  --openaiGray50: #f7f7f8;
  --openaiGray100: #ececf1;
  --openaiGray200: #d9d9e3;
  --openaiGray300: #c5c5d2;
  --openaiGray400: #acacbe;
  --openaiGray500: #8e8ea0;
  --openaiGray600: #6e6e80;
  --openaiGray700: #565869;
  --openaiGray800: #40414f;
  --openaiGray900: #343541;
  --openaiGray950: #202123;

  /* Brand Colors */
  --openaiGreen: #10a37f;
  --openaiGreenDark: #0d8f6f;
  --openaiGreenLight: #1aba8c;
  --openaiPurple: #ab68ff;
  --openaiPurpleDark: #8e44e2;
  --openaiBlue: #3b82f6;
  --openaiBlueDark: #2563eb;
  --openaiRed: #ef4444;
  --openaiRedDark: #dc2626;
  --openaiYellow: #fbbf24;
  --openaiYellowDark: #f59e0b;

  /* Core Colors */
  --textColor: var(--openaiGray900);
  --accentColor: var(--openaiGreen);
  --cautionColor: var(--openaiRed);
  accent-color: var(--accentColor);
  
  /* Background Colors */
  --windowBackgroundColor: var(--openaiGray0);
  --backgroundSecondary: var(--openaiGray50);
  --backgroundTertiary: var(--openaiGray100);
  --backgroundCode: var(--openaiGray950);
  --backgroundHover: rgba(0, 0, 0, 0.05);
  --backgroundActive: rgba(0, 0, 0, 0.1);

  /* No backdrop filters for clean appearance */
  --backgroundBackdropFilter: none;
  --windowBackdropFilter: none;
  
  /* Window Shadow */
  --windowBoxShadow: 0 0 10px rgba(0, 0, 0, 0.1);

  /* Scrollbar Colors */
  --scrollBarBackgroundColor: transparent;
  --scrollBarThumbColor: rgba(0, 0, 0, 0.14);
  --activeScrollBarThumbColor: rgba(0, 0, 0, 0.25);

  /* Text Colors */
  --labelColor: var(--textColor);
  --secondaryLabelColor: var(--openaiGray600);
  --tertiaryLabelColor: var(--openaiGray500);
  --quaternaryLabelColor: var(--openaiGray400);
  --placeholderTextColor: var(--openaiGray400);
  --selectedTextColor: var(--openaiGray0);
  --textBackgroundColor: var(--windowBackgroundColor);
  --selectedTextBackgroundColor: var(--accentColor);
  --keyboardFocusIndicatorColor: rgba(16, 163, 127, 0.2);
  --unemphasizedSelectedTextColor: var(--textColor);
  --unemphasizedSelectedTextBackgroundColor: var(--openaiGray100);
  --linkColor: var(--accentColor);
  --separatorColor: var(--openaiGray200);
  --selectedContentBackgroundColor: var(--accentColor);
  --unemphasizedSelectedContentBackgroundColor: var(--openaiGray100);
  --selectedMenuItemTextColor: var(--openaiGray0);
  --gridColor: var(--openaiGray100);
  --headerTextColor: var(--textColor);

  /* Control Colors */
  --controlAccentColor: var(--accentColor);
  --controlColor: var(--windowBackgroundColor);
  --controlTextColor: var(--textColor);
  --disabledControlTextColor: var(--openaiGray400);
  --selectedControlColor: var(--openaiGray100);
  --selectedControlTextColor: var(--textColor);
  --alternateSelectedControlTextColor: var(--openaiGray0);
  --scrubberTexturedBackgroundColor: var(--windowBackgroundColor);
  --windowFrameTextColor: var(--textColor);
  --underPageBackgroundColor: var(--openaiGray50);
  --findHighlightColor: #fbbf24;
  --highlightColor: var(--openaiGray0);
  --shadowColor: rgba(0, 0, 0, 1);

  /* System Colors */
  --systemBrownColor: #a8744f;
  --systemGrayColor: var(--openaiGray500);
  --systemGreenColor: var(--openaiGreen);
  --systemIndigoColor: #5856d6;
  --systemOrangeColor: #ff9500;
  --systemPinkColor: #ff2d55;
  --systemPurpleColor: var(--openaiPurple);
  --systemRedColor: var(--openaiRed);
  --systemTealColor: #32ade6;
  --systemYellowColor: var(--openaiYellow);
  --systemBlueColor: var(--openaiBlue);

  /* Table */
  --tableBackgroundColor: var(--windowBackgroundColor);
  --tableBorderColor: var(--openaiGray200);
  --tableHeaderTextColor: var(--textColor);
  --tableHeaderBackgroundColor: var(--openaiGray50);
  --tableHeaderBorderColor: var(--openaiGray200);
  --tableRowTextColor: var(--textColor);
  --tableRowBackgroundColor: var(--windowBackgroundColor);
  --tableRowBorderColor: var(--openaiGray100);
  --tableRowAlternateTextColor: var(--textColor);
  --tableRowAlternateBackgroundColor: var(--openaiGray50);
  --tableRowAlternateBorderColor: var(--openaiGray100);

  /* Dialog */
  --dialogBackground: var(--windowBackgroundColor);
  --dialogBoxShadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.04);
  
  /* Control */
  --controlBoxShadow: none;
  --controlFocusBoxShadow: 0 0 0 2px var(--keyboardFocusIndicatorColor);
  --controlTextFont: normal normal 400 14px/1.5 var(--themeControlFontFamily);
  --controlBorderRadius: 6px;
  --controlPadding: 8px 16px;
  --controlTextLetterSpacing: normal;
  --controlTextColor: var(--textColor);
  --controlBackground: var(--openaiGray50);
  --controlBorder: 1px solid var(--openaiGray300);
  --controlHoverBackground: var(--openaiGray100);
  --controlActiveBackground: var(--openaiGray200);

  /* Button Primary */
  --controlBoxShadow--primary: none;
  --controlBackground--primary: var(--accentColor);
  --controlBorder--primary: 1px solid var(--accentColor);
  --controlTextColor--primary: var(--openaiGray0);
  --controlHoverTextColor--primary: var(--openaiGray0);
  --controlHoverBackground--primary: var(--openaiGreenDark);
  --controlFocusBackground--primary: var(--openaiGreenDark);
  --controlFocusTextColor--primary: var(--openaiGray0);

  /* Button Secondary */
  --controlBoxShadow--secondary: none;
  --controlBackground--secondary: var(--windowBackgroundColor);
  --controlBorder--secondary: 1px solid var(--openaiGray300);
  --controlTextColor--secondary: var(--textColor);
  --controlHoverBackground--secondary: var(--openaiGray50);
  --controlHoverTextColor--secondary: var(--textColor);

  /* Input */
  --inputPadding: 10px 14px;
  --inputBoxShadow: none;
  --inputBorder: 1px solid var(--openaiGray300);
  --inputBorderRadius: 6px;
  --inputFont: normal normal 400 14px/1.5 var(--themeControlFontFamily);
  --inputBackground: var(--windowBackgroundColor);
  --inputFocusBorder: 1px solid var(--accentColor);
  --inputFocusBoxShadow: 0 0 0 2px var(--keyboardFocusIndicatorColor);
  --inputHoverBorder: 1px solid var(--openaiGray400);

  /* Select Box */
  --selectBoxSplitButtonWidth: 24px;
  --selectBoxSplitButtonBorderColor: transparent;
  --selectBoxSplitButtonBorderWidth: 0;

  /* Checkbox */
  --checkboxSize: 16px;
  --checkboxBorderRadius: 4px;

  /* Toolbar */
  --barItemsFontFamily: var(--themeLabelFontFamily);
  --barItemsTextColor: var(--controlTextColor);
  --barItemsLabelTextColor: var(--secondaryLabelColor);
  --barItemsDisabledLabelTextColor: var(--tertiaryLabelColor);
  --barItemsDisabledLabelBackgroundColor: var(--openaiGray100);
  --barItemsBorderRadius: 6px;
  --barItemsControlMarkerBorderRadius: 4px;
  --barItemsControlPlaceholderTextColor: var(--placeholderTextColor);
  --barItemsControlMarkerBackgroundColor: var(--openaiGray100);
  --barItemsControlsBorder: 1px solid var(--openaiGray200);
  --barItemsSegmentControlBackground: var(--openaiGray100);
  --barItemsHoverSegmentControlBackground: var(--openaiGray200);
  --barItemsActiveSegmentControlBackground: var(--openaiGray300);
  --segmentControlBackgroundColor: var(--windowBackgroundColor);
  
  /* Sidebar */
  --sidebarBackground: var(--windowBackgroundColor);
  --sidebarListItemFont: normal normal 400 14px/1.5 var(--themeDefaultFontFamily);
  --sidebarListItemBorderRadius: 6px;
  --selectedSidebarListItemBackground: var(--openaiGray100);
  --selectedSidebarListItemTextColor: var(--textColor);
  --selectedSidebarListItemMarker: 3px solid var(--accentColor);
  --sidebarListItemDetailsBackground: var(--openaiGray50);
  --sidebarListItemTextColor: var(--textColor);
  --sidebarListItemHoverBackground: var(--openaiGray50);
  --sidebarListItemIconSize: 16px;
  --sidebarListItemChildrenPadding: 0 0 0 24px;
  --sidebarSectionTitleColor: var(--openaiGray600);
  --sidebarSectionTitlePadding: 16px 16px 8px 16px;
  --sidebarListItemPadding: 8px 16px;
  
  /* Sidebar Section Title - OpenAI Style */
  --sidebarSectionTitleFont: var(--labelFont);
  --sidebarSectionTitleLetterSpacing: 0.03em;
  --sidebarSectionTitleMargin: 16px 0 8px 0;
  --sidebarSectionTitleBackground: transparent;
  --sidebarSectionTitleBorderRadius: 0;
  --sidebarSectionTitleTextTransform: uppercase;

  /* App Layout */
  --appMainToolbarFloatingBackground: rgba(255, 255, 255, 0.95);
  --appMainToolbarHeight: 56px;

  /* Tab Bar */
  --tabBarBackground: var(--windowBackgroundColor);
  --tabBarBoxShadow: inset 0 -1px 0 0 var(--openaiGray200);
  --tabItemHeight: 44px;
  --tabItemTextColor: var(--openaiGray600);
  --tabItemBoxShadow: none;
  --tabItemIconSize: 18px;
  --tabItemFont: normal normal 500 14px/1.5 var(--themeLabelFontFamily);
  --tabBarLayout: start;
  --tabItemBackground-selected: transparent;
  --tabItemBoxShadow-selected: inset 0 -2px 0 0 var(--accentColor);
  --tabItemTextColor-selected: var(--textColor);
  --tabItemFont-selected: var(--tabItemFont);

  /* Scrolled State */
  --scrolledAppMainToolbarBoxShadow: 0 1px 0 0 var(--openaiGray200);

  /* Segment Control */
  --segmentControlPadding: 2px;
  --segmentControlSegmentPadding: 6px 16px;
  --segmentControlBoxShadow: none;
  --segmentControlBackground: var(--openaiGray100);
  --segmentControlBorderRadius: 8px;
  --segmentControlIndicatorBoxShadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --segmentControlIndicatorBackground: var(--windowBackgroundColor);

  /* Card */
  --cardBackground: var(--windowBackgroundColor);
  --cardBorder: 1px solid var(--openaiGray200);
  --cardBorderRadius: 8px;
  --cardBoxShadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --cardPadding: 16px;

  /* Popover */
  --popoverBackground: var(--windowBackgroundColor);
  --popoverBorder: 1px solid var(--openaiGray200);
  --popoverBorderRadius: 8px;
  --popoverBoxShadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark Mode Colors */
    --windowBackgroundColor: var(--openaiGray900);
    --backgroundSecondary: var(--openaiGray800);
    --backgroundTertiary: var(--openaiGray700);
    --backgroundCode: var(--openaiGray950);
    --backgroundHover: rgba(255, 255, 255, 0.1);
    --backgroundActive: rgba(255, 255, 255, 0.15);

    /* Text Colors Dark */
    --textColor: var(--openaiGray100);
    --labelColor: var(--textColor);
    --secondaryLabelColor: var(--openaiGray300);
    --tertiaryLabelColor: var(--openaiGray400);
    --quaternaryLabelColor: var(--openaiGray500);
    --placeholderTextColor: var(--openaiGray500);
    --selectedTextColor: var(--openaiGray0);
    --textBackgroundColor: var(--openaiGray800);
    --selectedTextBackgroundColor: var(--accentColor);
    --keyboardFocusIndicatorColor: rgba(16, 163, 127, 0.3);
    --unemphasizedSelectedTextColor: var(--textColor);
    --unemphasizedSelectedTextBackgroundColor: var(--openaiGray700);
    --linkColor: var(--openaiGreenLight);
    --separatorColor: var(--openaiGray700);
    --selectedContentBackgroundColor: var(--accentColor);
    --unemphasizedSelectedContentBackgroundColor: var(--openaiGray700);
    --selectedMenuItemTextColor: var(--openaiGray0);
    --gridColor: var(--openaiGray700);
    --headerTextColor: var(--textColor);

    /* Control Dark */
    --controlTextColor: var(--textColor);
    --disabledControlTextColor: var(--openaiGray500);
    --selectedControlColor: var(--openaiGray700);
    --selectedControlTextColor: var(--textColor);
    --alternateSelectedControlTextColor: var(--openaiGray0);
    --windowFrameTextColor: var(--textColor);
    --underPageBackgroundColor: var(--openaiGray950);
    --highlightColor: var(--openaiGray200);

    /* Control Styling Dark */
    --controlBackground: var(--openaiGray800);
    --controlBorder: 1px solid var(--openaiGray600);
    --controlHoverBackground: var(--openaiGray700);
    --controlActiveBackground: var(--openaiGray600);

    /* Input Dark */
    --inputBackground: var(--openaiGray800);
    --inputBorder: 1px solid var(--openaiGray600);
    --inputHoverBorder: 1px solid var(--openaiGray500);
    --inputFocusBorder: 1px solid var(--accentColor);

    /* Table Dark */
    --tableBackgroundColor: var(--windowBackgroundColor);
    --tableBorderColor: var(--openaiGray700);
    --tableHeaderBackgroundColor: var(--openaiGray800);
    --tableHeaderBorderColor: var(--openaiGray700);
    --tableRowBackgroundColor: var(--windowBackgroundColor);
    --tableRowBorderColor: var(--openaiGray700);
    --tableRowAlternateBackgroundColor: var(--openaiGray800);
    --tableRowAlternateBorderColor: var(--openaiGray700);

    /* Dialog Dark */
    --dialogBackground: var(--openaiGray800);
    --dialogBoxShadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.2);

    /* Toolbar Dark */
    --barItemsDisabledLabelBackgroundColor: var(--openaiGray700);
    --barItemsControlMarkerBackgroundColor: var(--openaiGray700);
    --barItemsControlsBorder: 1px solid var(--openaiGray600);
    --barItemsSegmentControlBackground: var(--openaiGray700);
    --barItemsHoverSegmentControlBackground: var(--openaiGray600);
    --barItemsActiveSegmentControlBackground: var(--openaiGray500);
    --selectedSidebarListItemBackground: var(--openaiGray700);
    --selectedSidebarListItemTextColor: var(--textColor);
    --sidebarListItemDetailsBackground: var(--openaiGray800);
    --sidebarListItemTextColor: var(--textColor);
    --sidebarListItemHoverBackground: var(--openaiGray800);
    --sidebarSectionTitleColor: var(--openaiGray400);
    --sidebarListItemPadding: 8px 16px;

    /* App Layout Dark */
    --appMainToolbarFloatingBackground: rgba(52, 53, 65, 0.95);

    /* Tab Bar Dark */
    --tabBarBackground: var(--windowBackgroundColor);
    --tabBarBoxShadow: inset 0 -1px 0 0 var(--openaiGray700);
    --tabItemTextColor: var(--openaiGray400);
    --tabItemBoxShadow-selected: inset 0 -2px 0 0 var(--accentColor);
    --tabItemTextColor-selected: var(--textColor);

    /* Segment Control Dark */
    --segmentControlBackground: var(--openaiGray700);
    --segmentControlIndicatorBackground: var(--openaiGray600);

    /* Card Dark */
    --cardBackground: var(--openaiGray800);
    --cardBorder: 1px solid var(--openaiGray700);

    /* Popover Dark */
    --popoverBackground: var(--openaiGray800);
    --popoverBorder: 1px solid var(--openaiGray700);

    /* Scrollbar Dark */
    --scrollBarThumbColor: rgba(255, 255, 255, 0.14);
    --activeScrollBarThumbColor: rgba(255, 255, 255, 0.25);

    /* Primary Button Dark remains the same */
    --controlBackground--primary: var(--accentColor);
    --controlHoverBackground--primary: var(--openaiGreenDark);

    /* Secondary Button Dark */
    --controlBackground--secondary: var(--openaiGray800);
    --controlBorder--secondary: 1px solid var(--openaiGray600);
    --controlHoverBackground--secondary: var(--openaiGray700);
  }
}

/* Scrollbar Styling */
body ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;
}

body ::-webkit-scrollbar-corner {
  background: transparent;
  user-select: none;
}

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

body ::-webkit-scrollbar-track {
  background: transparent;
}

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

/* High Contrast Support */
@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);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --animationDuration: 0ms;
  }
}