/**
 * @theme Naver LINE
 * @description Inspired by LY Corporation's LINE brand with crisp white surfaces, bright green accents, and friendly messaging vibes
 * @author Tanuki UI
 * @version 1.0.0
 * @category Communication
 */

:root {
  /* Fonts - LINE uses LINE Seed with humanist geometric sans fallbacks */
  --themeDefaultFontFamily: "LINE Seed JP", "LINE Seed Sans", "Noto Sans JP", "Noto Sans", "Segoe UI", "Hiragino Sans", "Helvetica Neue", "Arial", sans-serif;
  --themeControlFontFamily: var(--themeDefaultFontFamily);
  --themeLabelFontFamily: var(--themeDefaultFontFamily);
  --themeMonospaceFont: "LINE Seed Sans Mono", "SFMono-Regular", "Consolas", "Liberation Mono", "Courier New", monospace;
  --themeSystemFont: normal normal 400 14px/1.6 var(--themeDefaultFontFamily);
  --textFont: normal normal 400 14px/1.7 var(--themeDefaultFontFamily);
  --labelFont: normal normal 600 13px/1.5 var(--themeLabelFontFamily);

  /* Naver LINE Color Palette - Light Mode */
  --lineNeutral50: oklch(98.4% 0.003 247.858);
  --lineNeutral100: oklch(96.8% 0.007 247.896);
  --lineNeutral200: oklch(92.9% 0.013 255.508);
  --lineNeutral300: oklch(86.9% 0.022 252.894);
  --lineNeutral400: oklch(70.4% 0.04 256.788);
  --lineNeutral500: oklch(55.4% 0.046 257.417);
  --lineNeutral600: oklch(44.6% 0.043 257.281);
  --lineNeutral700: oklch(37.2% 0.044 257.287);
  --lineNeutral800: oklch(27.9% 0.041 260.031);
  --lineNeutral900: oklch(20.8% 0.042 265.755);
  --lineNeutral950: oklch(12.9% 0.042 264.695);

  /* Brand Colors */
  --lineGreen50: oklch(98.2% 0.018 155.826);
  --lineGreen100: oklch(96.2% 0.044 156.743);
  --lineGreen200: oklch(92.5% 0.084 155.995);
  --lineGreen300: oklch(87.1% 0.15 154.449);
  --lineGreen400: oklch(79.2% 0.209 151.711);
  --lineGreen500: oklch(72.3% 0.219 149.579);
  --lineGreen600: oklch(62.7% 0.194 149.214);
  --lineGreen700: oklch(52.7% 0.154 150.069);
  --lineGreen800: oklch(44.8% 0.119 151.328);
  --lineGreen900: oklch(39.3% 0.095 152.535);
  --lineGreen950: oklch(26.6% 0.065 152.934);
  --lineWhite: #ffffff;
  --lineBlack: #000000;
  --lineGreen: #06c755;
  --lineGreenSecondary: #05b34c;
  --lineGreenDark: var(--lineGreen600);
  --lineGreenLight: var(--lineGreen300);
  --lineGreenMuted: color-mix(in oklch, var(--lineGreen100) 70%, white 30%);
  --lineSecondary400: #96b2ff;
  --lineSecondary500: #6388ff;
  --lineSecondary600: #4270ed;
  --lineWarning300: oklch(90.5% 0.182 98.111);
  --lineWarning500: oklch(79.5% 0.184 86.047);
  --lineError500: oklch(63.7% 0.237 25.331);

  /* Core Colors */
  --textColor: var(--lineNeutral900);
  --accentColor: var(--lineGreen500);
  --cautionColor: var(--lineError500);
  accent-color: var(--accentColor);

  /* Backgrounds */
  --windowBackgroundColor: var(--lineNeutral50);
  --backgroundSecondary: var(--lineNeutral100);
  --backgroundTertiary: var(--lineNeutral200);
  --backgroundCode: color-mix(in oklch, var(--lineNeutral950) 90%, black);
  --backgroundHover: color-mix(in oklch, var(--lineGreen100) 60%, transparent);
  --backgroundActive: color-mix(in oklch, var(--lineGreen200) 70%, transparent);
  --backgroundBackdropFilter: none;
  --windowBackdropFilter: none;
  --windowBoxShadow: 0 24px 60px color-mix(in oklch, var(--lineNeutral900) 10%, transparent);

  /* Window Buttons */
  --windowCloseButtonBackground: #f25f5c;
  --windowExpandButtonBackground: #ffca3a;
  --windowFullscreenButtonBackground: var(--lineGreen);
  --windowButtonBoxShadow: none;

  /* Scrollbar */
  --scrollBarBackgroundColor: transparent;
  --scrollBarThumbColor: color-mix(in oklch, var(--lineNeutral600) 25%, transparent);
  --activeScrollBarThumbColor: color-mix(in oklch, var(--lineNeutral600) 40%, transparent);

  /* Text Colors */
  --labelColor: var(--textColor);
  --secondaryLabelColor: var(--lineNeutral600);
  --tertiaryLabelColor: var(--lineNeutral500);
  --quaternaryLabelColor: var(--lineNeutral400);
  --placeholderTextColor: var(--lineNeutral400);
  --selectedTextColor: var(--lineWhite);
  --textBackgroundColor: var(--windowBackgroundColor);
  --selectedTextBackgroundColor: var(--accentColor);
  --keyboardFocusIndicatorColor: color-mix(in oklch, var(--lineGreen200) 40%, transparent);
  --unemphasizedSelectedTextColor: var(--textColor);
  --unemphasizedSelectedTextBackgroundColor: var(--lineNeutral200);
  --linkColor: var(--lineSecondary600);
  --separatorColor: var(--lineNeutral200);
  --selectedContentBackgroundColor: var(--accentColor);
  --unemphasizedSelectedContentBackgroundColor: var(--lineNeutral200);
  --selectedMenuItemTextColor: var(--lineWhite);
  --gridColor: var(--lineNeutral200);
  --headerTextColor: var(--textColor);

  /* Controls */
  --controlAccentColor: var(--accentColor);
  --controlColor: var(--windowBackgroundColor);
  --controlTextColor: var(--textColor);
  --disabledControlTextColor: var(--lineNeutral400);
  --selectedControlColor: var(--lineGreenMuted);
  --selectedControlTextColor: var(--textColor);
  --alternateSelectedControlTextColor: var(--lineWhite);
  --scrubberTexturedBackgroundColor: var(--windowBackgroundColor);
  --windowFrameTextColor: var(--textColor);
  --underPageBackgroundColor: var(--lineNeutral100);
  --findHighlightColor: var(--lineWarning300);
  --highlightColor: var(--lineWhite);
  --shadowColor: rgba(0, 0, 0, 1);

  /* System Colors */
  --systemBrownColor: #b28a65;
  --systemGrayColor: var(--lineNeutral500);
  --systemGreenColor: var(--lineGreen500);
  --systemIndigoColor: #5062ff;
  --systemOrangeColor: #ff9f1c;
  --systemPinkColor: #ff2d83;
  --systemPurpleColor: #b08bf7;
  --systemRedColor: var(--lineError500);
  --systemTealColor: #32c7d9;
  --systemYellowColor: var(--lineWarning500);
  --systemBlueColor: var(--lineSecondary500);

  /* Table */
  --tableFont: var(--textFont);
  --tableLetterSpacing: normal;
  --tableBackground: var(--tableBackgroundColor, var(--windowBackgroundColor));
  --tableBorderSpacing: 0;
  --tableBorderRadius: var(--cardBorderRadius, 0);
  --tableBoxShadow: var(--cardBoxShadow, none);
  --tableHeaderPadding: var(--tableCellPadding, 0 0.75em);
  --tableHeaderTextAlign: left;
  --tableHeaderLetterSpacing: normal;
  --tableHeaderHeight: var(--tableHeaderMinHeight, var(--tableCellMinHeight, 24px));
  --tableHeaderBackground: var(--tableHeaderGradient, var(--tableHeaderBackgroundColor, transparent));
  --tableHeaderDivider: 1px solid var(--lineNeutral200);
  --tableHeaderDividerOffsetX: 0;
  --tableHeaderDividerOffsetY: 50%;
  --tableHeaderDividerHeight: 1em;
  --tableHeaderDividerOpacity: 1;
  --tableHeaderStickyBackground: var(--tableHeaderBackground);
  --tableHeaderBackdropFilter: none;
  --tableHeaderStickyShadow: var(--tableHeaderBoxShadow, var(--tableBoxShadow, none));
  --tableRowBackground: var(--tableRowBackgroundColor, var(--tableBackground));
  --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.18s ease, color 0.18s ease;
  --tableCellLetterSpacing: normal;
  --tableBackgroundColor: var(--windowBackgroundColor);
  --tableBorderColor: var(--lineNeutral200);
  --tableBorderWidth: 1px;
  --tableBorderStyle: solid;
  --tableHeaderTextColor: var(--textColor);
  --tableHeaderBackgroundColor: color-mix(in oklch, var(--lineNeutral100) 92%, transparent);
  --tableHeaderBorderColor: var(--lineNeutral200);
  --tableHeaderBorderWidth: 1px;
  --tableHeaderBorderStyle: solid;
  --tableRowTextColor: var(--textColor);
  --tableRowBackgroundColor: var(--windowBackgroundColor);
  --tableRowBorderColor: var(--lineNeutral100);
  --tableRowAlternateTextColor: var(--textColor);
  --tableRowAlternateBackgroundColor: var(--lineNeutral100);
  --tableRowAlternateBorderColor: var(--lineNeutral100);
  --tableCellBorderWidth: 1px;
  --tableCellBorderStyle: solid;
  --tableCellBorder: 1px solid var(--lineNeutral100);

  /* Dialog */
  --dialogBackground: var(--windowBackgroundColor);
  --dialogBoxShadow: 0 32px 60px color-mix(in oklch, var(--lineNeutral900) 12%, transparent), 0 2px 10px color-mix(in oklch, var(--lineNeutral900) 6%, transparent);

  /* Control */
  --controlBoxShadow: none;
  --controlFocusBoxShadow: 0 0 0 2px var(--keyboardFocusIndicatorColor);
  --controlTextFont: normal normal 500 14px/1.5 var(--themeControlFontFamily);
  --controlBorderRadius: 10px;
  --controlPadding: 10px 18px;
  --controlTextLetterSpacing: 0.01em;
  --controlBackground: var(--lineNeutral100);
  --controlBorder: 1px solid var(--lineNeutral200);
  --controlHoverBackground: var(--lineNeutral200);
  --controlActiveBackground: var(--lineNeutral300);

  /* Button Primary */
  --controlBoxShadow--primary: 0 8px 20px color-mix(in oklch, var(--lineGreen500) 25%, transparent);
  --controlBackground--primary: var(--accentColor);
  --controlBorder--primary: 1px solid var(--accentColor);
  --controlTextColor--primary: var(--lineWhite);
  --controlHoverTextColor--primary: var(--lineWhite);
  --controlHoverBackground--primary: var(--lineGreenDark);
  --controlFocusBackground--primary: var(--lineGreenDark);
  --controlFocusTextColor--primary: var(--lineWhite);

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

  /* Input */
  --inputPadding: var(--controlPadding);
  --inputBoxShadow: none;
  --inputBorder: 1px solid var(--lineNeutral200);
  --inputBorderRadius: 12px;
  --inputFont: normal normal 400 14px/1.6 var(--themeControlFontFamily);
  --inputBackground: var(--windowBackgroundColor);
  --inputFocusBorder: 1px solid var(--accentColor);
  --inputFocusBoxShadow: 0 0 0 2px color-mix(in oklch, var(--lineGreen200) 45%, transparent);
  --inputHoverBorder: 1px solid var(--lineNeutral300);

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

  /* Checkbox */
  --checkboxSize: 18px;
  --checkboxBorderRadius: 6px;

  /* Toolbar */
  --barItemsFontFamily: var(--themeLabelFontFamily);
  --barItemsTextColor: var(--controlTextColor);
  --barItemsLabelTextColor: var(--secondaryLabelColor);
  --barItemsDisabledLabelTextColor: var(--tertiaryLabelColor);
  --barItemsDisabledLabelBackgroundColor: var(--lineNeutral200);
  --barItemsBorderRadius: 12px;
  --barItemsControlMarkerBorderRadius: 6px;
  --barItemsControlPlaceholderTextColor: var(--placeholderTextColor);
  --barItemsControlMarkerBackgroundColor: var(--lineNeutral200);
  --barItemsControlsBorder: 1px solid var(--lineNeutral200);
  --barItemsSegmentControlBackground: var(--lineNeutral200);
  --barItemsHoverSegmentControlBackground: var(--lineNeutral300);
  --barItemsActiveSegmentControlBackground: var(--lineNeutral400);
  --segmentControlBackgroundColor: var(--windowBackgroundColor);

  /* Sidebar */
  --sidebarBackground: var(--windowBackgroundColor);
  --sidebarListItemFont: normal normal 500 14px/1.6 var(--themeDefaultFontFamily);
  --sidebarListItemBorderRadius: 12px;
  --selectedSidebarListItemBackground: var(--lineGreen);
  --selectedSidebarListItemTextColor: var(--alternateSelectedControlTextColor);
  --selectedSidebarListItemMarker: 3px solid var(--accentColor);
  --sidebarListItemDetailsBackground: var(--lineNeutral100);
  --sidebarListItemTextColor: var(--textColor);
  --sidebarListItemHoverBackground: color-mix(in oklch, var(--lineGreen200) 35%, transparent);
  --sidebarListItemIconSize: 18px;
  --sidebarListItemChildrenPadding: 0 0 0 24px;
  --sidebarSectionTitleColor: var(--lineNeutral500);
  --sidebarSectionTitlePadding: 16px 16px 8px 16px;
  --sidebarListItemPadding: 10px 16px;

  /* Sidebar Section Title */
  --sidebarSectionTitleFont: normal normal 700 12px/1.4 var(--themeLabelFontFamily);
  --sidebarSectionTitleLetterSpacing: 0.12em;
  --sidebarSectionTitleMargin: 18px 0 8px 0;
  --sidebarSectionTitleBackground: transparent;
  --sidebarSectionTitleBorderRadius: 0;
  --sidebarSectionTitleTextTransform: uppercase;

  /* App Layout */
  --appMainToolbarFloatingBackground: color-mix(in oklch, var(--lineWhite) 90%, transparent);
  --appMainToolbarHeight: 60px;

  /* Tab Bar */
  --tabBarBackground: var(--windowBackgroundColor);
  --tabBarBoxShadow: inset 0 -1px 0 0 var(--lineNeutral200);
  --tabItemHeight: 46px;
  --tabItemTextColor: var(--lineNeutral600);
  --tabItemBoxShadow: none;
  --tabItemIconSize: 18px;
  --tabItemFont: normal normal 600 14px/1.5 var(--themeLabelFontFamily);
  --tabBarLayout: start;
  --tabItemBackground-selected: transparent;
  --tabItemBoxShadow-selected: inset 0 -3px 0 0 var(--accentColor);
  --tabItemTextColor-selected: var(--textColor);
  --tabItemFont-selected: var(--tabItemFont);

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

  /* Segment Control */
  --segmentControlPadding: 4px;
  --segmentControlSegmentPadding: 8px 18px;
  --segmentControlBoxShadow: inset 0 0 0 1px var(--lineNeutral200);
  --segmentControlBackground: var(--lineNeutral200);
  --segmentControlBorderRadius: 12px;
  --segmentControlIndicatorBoxShadow: 0 10px 24px color-mix(in oklch, var(--lineGreen300) 30%, transparent);
  --segmentControlIndicatorBorder: 1px solid var(--lineNeutral200);
  --segmentControlIndicatorBackground: var(--windowBackgroundColor);

  /* Card */
  --cardBackground: var(--windowBackgroundColor);
  --cardBorder: 1px solid var(--lineNeutral200);
  --cardBorderRadius: 16px;
  --cardBoxShadow: 0 20px 45px color-mix(in oklch, var(--lineNeutral900) 10%, transparent);
  --cardPadding: 20px;
  --cardHoverBackground: var(--lineGreenMuted);
  --cardHoverBorder: 1px solid color-mix(in oklch, var(--lineGreen300) 45%, transparent);
  --cardHoverBoxShadow: 0 28px 70px color-mix(in oklch, var(--lineGreen500) 18%, transparent);
  --cardActiveBackground: color-mix(in oklch, var(--lineGreen200) 50%, transparent);
  --cardActiveBoxShadow: 0 20px 48px color-mix(in oklch, var(--lineGreen500) 24%, transparent);
  --cardFocusBorder: 1px solid var(--accentColor);
  --cardFocusBoxShadow: 0 0 0 3px color-mix(in oklch, var(--lineGreen200) 60%, transparent);
  --cardDisabledBackground: var(--backgroundSecondary);
  --cardDisabledOpacity: 0.6;
  --cardBackground--elevated: var(--windowBackgroundColor);
  --cardBoxShadow--elevated: 0 32px 80px color-mix(in oklch, var(--lineNeutral900) 14%, transparent);
  --cardBackground--outlined: var(--windowBackgroundColor);
  --cardBorder--outlined: 1px solid var(--lineNeutral200);
  --cardBackground--filled: var(--lineGreenMuted);
  --cardBoxShadow--filled: none;

  /* Popover */
  --popoverBackground: var(--windowBackgroundColor);
  --popoverBorder: 1px solid var(--lineNeutral200);
  --popoverBorderRadius: 16px;
  --popoverBoxShadow: 0 24px 48px color-mix(in oklch, var(--lineNeutral900) 12%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark Mode Palette */
    --windowBackgroundColor: var(--lineNeutral900);
    --backgroundSecondary: color-mix(in oklch, var(--lineNeutral900) 85%, black 15%);
    --backgroundTertiary: color-mix(in oklch, var(--lineNeutral900) 75%, black 25%);
    --backgroundCode: color-mix(in oklch, var(--lineNeutral950) 90%, black 10%);
    --backgroundHover: color-mix(in oklch, white 12%, transparent);
    --backgroundActive: color-mix(in oklch, var(--lineGreen700) 30%, transparent);

    /* Text Colors Dark */
    --textColor: var(--lineNeutral100);
    --labelColor: var(--textColor);
    --secondaryLabelColor: color-mix(in oklch, var(--lineNeutral300) 80%, transparent);
    --tertiaryLabelColor: color-mix(in oklch, var(--lineNeutral400) 70%, transparent);
    --quaternaryLabelColor: color-mix(in oklch, var(--lineNeutral500) 60%, transparent);
    --placeholderTextColor: color-mix(in oklch, var(--lineNeutral500) 45%, transparent);
    --selectedTextColor: var(--lineWhite);
    --textBackgroundColor: color-mix(in oklch, var(--lineNeutral900) 92%, black 8%);
    --selectedTextBackgroundColor: var(--accentColor);
    --keyboardFocusIndicatorColor: color-mix(in oklch, var(--lineGreen400) 40%, transparent);
    --unemphasizedSelectedTextColor: var(--textColor);
    --unemphasizedSelectedTextBackgroundColor: color-mix(in oklch, var(--lineNeutral800) 80%, transparent);
    --linkColor: var(--lineGreen300);
    --separatorColor: color-mix(in oklch, var(--lineNeutral700) 60%, transparent);
    --selectedContentBackgroundColor: var(--accentColor);
    --unemphasizedSelectedContentBackgroundColor: color-mix(in oklch, var(--lineNeutral800) 85%, transparent);
    --selectedMenuItemTextColor: var(--lineWhite);
    --gridColor: color-mix(in oklch, var(--lineNeutral800) 70%, transparent);
    --headerTextColor: var(--textColor);

    /* Control Dark */
    --controlTextColor: var(--textColor);
    --disabledControlTextColor: color-mix(in oklch, var(--lineNeutral500) 40%, transparent);
    --selectedControlColor: color-mix(in oklch, var(--lineGreen700) 30%, transparent);
    --selectedControlTextColor: var(--textColor);
    --alternateSelectedControlTextColor: var(--lineWhite);
    --windowFrameTextColor: var(--textColor);
    --underPageBackgroundColor: color-mix(in oklch, var(--lineNeutral950) 85%, black 15%);
    --highlightColor: color-mix(in oklch, var(--lineNeutral200) 35%, transparent);

    /* Control Styling Dark */
    --controlBackground: color-mix(in oklch, var(--lineNeutral900) 80%, black 20%);
    --controlBorder: 1px solid color-mix(in oklch, var(--lineNeutral700) 70%, transparent);
    --controlHoverBackground: color-mix(in oklch, var(--lineGreen700) 25%, var(--lineNeutral900) 75%);
    --controlActiveBackground: color-mix(in oklch, var(--lineGreen600) 35%, var(--lineNeutral900) 65%);

    /* Input Dark */
    --inputBackground: color-mix(in oklch, var(--lineNeutral900) 85%, black 15%);
    --inputBorder: 1px solid color-mix(in oklch, var(--lineNeutral700) 65%, transparent);
    --inputHoverBorder: 1px solid color-mix(in oklch, var(--lineNeutral600) 70%, transparent);
    --inputFocusBorder: 1px solid var(--accentColor);

    /* Table Dark */
    --tableHeaderDivider: 1px solid color-mix(in oklch, var(--lineNeutral700) 60%, transparent);
    --tableCellBorder: 1px solid color-mix(in oklch, var(--lineNeutral700) 50%, transparent);
    --tableCellBorderWidth: 1px;
    --tableCellBorderStyle: solid;
    --tableBackgroundColor: var(--windowBackgroundColor);
    --tableBorderColor: color-mix(in oklch, var(--lineNeutral700) 55%, transparent);
    --tableBorderWidth: 1px;
    --tableBorderStyle: solid;
    --tableHeaderBackgroundColor: color-mix(in oklch, var(--lineNeutral900) 85%, var(--lineNeutral800) 15%);
    --tableHeaderBorderColor: color-mix(in oklch, var(--lineNeutral700) 55%, transparent);
    --tableHeaderBorderWidth: 1px;
    --tableHeaderBorderStyle: solid;
    --tableRowBackgroundColor: var(--windowBackgroundColor);
    --tableRowBorderColor: color-mix(in oklch, var(--lineNeutral800) 35%, transparent);
    --tableRowAlternateBackgroundColor: color-mix(in oklch, var(--lineNeutral900) 75%, var(--lineNeutral800) 25%);
    --tableRowAlternateBorderColor: color-mix(in oklch, var(--lineNeutral800) 35%, transparent);

    /* Dialog Dark */
    --dialogBackground: color-mix(in oklch, var(--lineNeutral900) 88%, var(--lineNeutral800) 12%);
    --dialogBoxShadow: 0 30px 84px color-mix(in oklch, black 50%, transparent), 0 8px 20px color-mix(in oklch, black 35%, transparent);

    /* Toolbar Dark */
    --barItemsDisabledLabelBackgroundColor: color-mix(in oklch, var(--lineNeutral800) 70%, transparent);
    --barItemsControlMarkerBackgroundColor: color-mix(in oklch, var(--lineNeutral800) 65%, transparent);
    --barItemsControlsBorder: 1px solid color-mix(in oklch, var(--lineNeutral700) 60%, transparent);
    --barItemsSegmentControlBackground: color-mix(in oklch, var(--lineNeutral900) 75%, var(--lineNeutral800) 25%);
    --barItemsHoverSegmentControlBackground: color-mix(in oklch, var(--lineGreen700) 20%, var(--lineNeutral800) 80%);
    --barItemsActiveSegmentControlBackground: color-mix(in oklch, var(--lineGreen600) 30%, var(--lineNeutral800) 70%);
    --selectedSidebarListItemBackground: color-mix(in oklch, var(--lineGreen700) 28%, transparent);
    --selectedSidebarListItemTextColor: var(--textColor);
    --sidebarListItemDetailsBackground: color-mix(in oklch, var(--lineNeutral900) 78%, var(--lineNeutral800) 22%);
    --sidebarListItemTextColor: var(--textColor);
    --sidebarListItemHoverBackground: color-mix(in oklch, var(--lineGreen700) 22%, transparent);
    --sidebarSectionTitleColor: color-mix(in oklch, var(--lineNeutral300) 70%, transparent);

    /* App Layout Dark */
    --appMainToolbarFloatingBackground: color-mix(in oklch, var(--lineNeutral950) 85%, transparent);

    /* Tab Bar Dark */
    --tabBarBackground: var(--windowBackgroundColor);
    --tabBarBoxShadow: inset 0 -1px 0 0 color-mix(in oklch, var(--lineNeutral800) 55%, transparent);
    --tabItemTextColor: color-mix(in oklch, var(--lineNeutral400) 80%, transparent);
    --tabItemBoxShadow-selected: inset 0 -3px 0 0 var(--accentColor);
    --tabItemTextColor-selected: var(--textColor);

    /* Segment Control Dark */
    --segmentControlBackground: color-mix(in oklch, var(--lineNeutral900) 78%, var(--lineNeutral800) 22%);
    --segmentControlIndicatorBackground: color-mix(in oklch, var(--lineNeutral800) 80%, var(--lineNeutral700) 20%);

    /* Card Dark */
    --cardBackground: color-mix(in oklch, var(--lineNeutral900) 85%, var(--lineNeutral800) 15%);
    --cardBorder: 1px solid color-mix(in oklch, var(--lineNeutral700) 55%, transparent);
    --cardHoverBackground: color-mix(in oklch, var(--lineGreen700) 22%, var(--lineNeutral900) 78%);
    --cardHoverBorder: 1px solid color-mix(in oklch, var(--lineGreen600) 40%, transparent);
    --cardHoverBoxShadow: 0 36px 96px color-mix(in oklch, black 45%, transparent);
    --cardActiveBackground: color-mix(in oklch, var(--lineGreen600) 30%, var(--lineNeutral900) 70%);
    --cardActiveBoxShadow: 0 28px 80px color-mix(in oklch, black 40%, transparent);
    --cardFocusBorder: 1px solid var(--accentColor);
    --cardFocusBoxShadow: 0 0 0 3px color-mix(in oklch, var(--lineGreen400) 45%, transparent);
    --cardDisabledBackground: color-mix(in oklch, var(--lineNeutral900) 60%, transparent);
    --cardDisabledOpacity: 0.6;
    --cardBackground--elevated: color-mix(in oklch, var(--lineNeutral900) 88%, var(--lineNeutral800) 12%);
    --cardBoxShadow--elevated: 0 40px 110px color-mix(in oklch, black 55%, transparent);
    --cardBackground--outlined: transparent;
    --cardBorder--outlined: 1px solid color-mix(in oklch, var(--lineNeutral700) 55%, transparent);
    --cardBackground--filled: color-mix(in oklch, var(--lineNeutral900) 82%, var(--lineNeutral800) 18%);
    --cardBoxShadow--filled: none;

    /* Popover Dark */
    --popoverBackground: color-mix(in oklch, var(--lineNeutral900) 82%, var(--lineNeutral800) 18%);
    --popoverBorder: 1px solid color-mix(in oklch, var(--lineNeutral700) 60%, transparent);

    /* Scrollbar Dark */
    --scrollBarThumbColor: color-mix(in oklch, var(--lineNeutral500) 35%, transparent);
    --activeScrollBarThumbColor: color-mix(in oklch, var(--lineNeutral400) 45%, transparent);

    /* Buttons Dark */
    --controlBackground--primary: var(--accentColor);
    --controlHoverBackground--primary: var(--lineGreen400);
    --controlBoxShadow--primary: 0 20px 50px color-mix(in oklch, var(--lineGreen500) 35%, transparent);
    --controlBackground--secondary: color-mix(in oklch, var(--lineNeutral900) 80%, black 20%);
    --controlBorder--secondary: 1px solid color-mix(in oklch, var(--lineNeutral700) 60%, transparent);
    --controlHoverBackground--secondary: color-mix(in oklch, var(--lineNeutral800) 70%, transparent);
  }
}

/* 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: var(--scrollBarBackgroundColor);
}

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;
  }
}