:root {
  /* Fonts - Material Design uses Roboto */
  --themeDefaultFontFamily: "Roboto", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif;
  --themeControlFontFamily: var(--themeDefaultFontFamily);
  --themeLabelFontFamily: var(--themeDefaultFontFamily);
  --themeMonospaceFont: "Roboto Mono", "Source Code Pro", "Fira Code", "Courier New", monospace;
  --themeSystemFont: normal normal 400 14px/1.5 var(--themeDefaultFontFamily);
  --textFont: normal normal 400 16px/1.5 var(--themeDefaultFontFamily);
  --labelFont: normal normal 500 14px/1.428571 var(--themeLabelFontFamily);

  /* Material Design 3 Color Palette - Light Mode */
  /* Primary Colors */
  --mdPrimary: #6750a4;
  --mdOnPrimary: #ffffff;
  --mdPrimaryContainer: #eaddff;
  --mdOnPrimaryContainer: #21005d;
  
  /* Secondary Colors */
  --mdSecondary: #625b71;
  --mdOnSecondary: #ffffff;
  --mdSecondaryContainer: #e8def8;
  --mdOnSecondaryContainer: #1d192b;
  
  /* Tertiary Colors */
  --mdTertiary: #7d5260;
  --mdOnTertiary: #ffffff;
  --mdTertiaryContainer: #ffd8e4;
  --mdOnTertiaryContainer: #31111d;
  
  /* Error Colors */
  --mdError: #ba1a1a;
  --mdOnError: #ffffff;
  --mdErrorContainer: #ffdad6;
  --mdOnErrorContainer: #410002;
  
  /* Background Colors */
  --mdBackground: #fffbfe;
  --mdOnBackground: #1c1b1f;
  --mdSurface: #fffbfe;
  --mdOnSurface: #1c1b1f;
  --mdSurfaceVariant: #e7e0ec;
  --mdOnSurfaceVariant: #49454f;
  
  /* Outline Colors */
  --mdOutline: #79747e;
  --mdOutlineVariant: #cac4d0;
  
  /* Inverse Colors */
  --mdInverseSurface: #313033;
  --mdInverseOnSurface: #f4eff4;
  --mdInversePrimary: #d0bcff;
  
  /* Shadow */
  --mdShadow: #000000;
  --mdSurfaceTint: var(--mdPrimary);
  
  /* Scrim */
  --mdScrim: #000000;

  /* Core Colors */
  --textColor: var(--mdOnBackground);
  --accentColor: var(--mdPrimary);
  --cautionColor: var(--mdError);
  accent-color: var(--accentColor);
  
  /* Background Colors */
  --windowBackgroundColor: var(--mdBackground);
  --backgroundSecondary: var(--mdSurface);
  --backgroundTertiary: var(--mdSurfaceVariant);
  --backgroundHover: rgba(103, 80, 164, 0.08);
  --backgroundActive: rgba(103, 80, 164, 0.12);

  /* No backdrop filters for Material Design */
  --backgroundBackdropFilter: none;
  --windowBackdropFilter: none;
  
  /* Elevation System - Material Design 3 */
  --elevation0: none;
  --elevation1: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --elevation2: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --elevation3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --elevation4: 0 6px 10px 4px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.3);
  --elevation5: 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px 0 rgba(0, 0, 0, 0.3);
  
  /* Window Shadow */
  --windowBoxShadow: var(--elevation3);

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

  /* Text Colors */
  --labelColor: var(--mdOnBackground);
  --secondaryLabelColor: var(--mdOnSurfaceVariant);
  --tertiaryLabelColor: rgba(28, 27, 31, 0.6);
  --quaternaryLabelColor: rgba(28, 27, 31, 0.38);
  --placeholderTextColor: var(--mdOnSurfaceVariant);
  --selectedTextColor: var(--mdOnPrimary);
  --textBackgroundColor: var(--mdBackground);
  --selectedTextBackgroundColor: var(--mdPrimary);
  --keyboardFocusIndicatorColor: rgba(103, 80, 164, 0.12);
  --unemphasizedSelectedTextColor: var(--mdOnSecondaryContainer);
  --unemphasizedSelectedTextBackgroundColor: var(--mdSecondaryContainer);
  --linkColor: var(--mdPrimary);
  --separatorColor: var(--mdOutlineVariant);
  --selectedContentBackgroundColor: var(--mdPrimaryContainer);
  --unemphasizedSelectedContentBackgroundColor: var(--mdSecondaryContainer);
  --selectedMenuItemTextColor: var(--mdOnSecondaryContainer);
  --gridColor: var(--mdOutlineVariant);
  --headerTextColor: var(--mdOnBackground);

  /* Control Colors */
  --controlAccentColor: var(--mdPrimary);
  --controlColor: var(--mdSurface);
  --controlTextColor: var(--mdOnSurface);
  --disabledControlTextColor: rgba(28, 27, 31, 0.38);
  --selectedControlColor: var(--mdPrimaryContainer);
  --selectedControlTextColor: var(--mdOnPrimaryContainer);
  --alternateSelectedControlTextColor: var(--mdOnPrimary);
  --scrubberTexturedBackgroundColor: var(--mdSurfaceVariant);
  --windowFrameTextColor: var(--mdOnSurface);
  --underPageBackgroundColor: var(--mdBackground);
  --findHighlightColor: #fff59d;
  --highlightColor: var(--mdOnPrimary);
  --shadowColor: var(--mdShadow);

  /* System Colors */
  --systemBrownColor: #795548;
  --systemGrayColor: #9e9e9e;
  --systemGreenColor: #4caf50;
  --systemIndigoColor: #3f51b5;
  --systemOrangeColor: #ff9800;
  --systemPinkColor: #e91e63;
  --systemPurpleColor: var(--mdPrimary);
  --systemRedColor: var(--mdError);
  --systemTealColor: #009688;
  --systemYellowColor: #ffeb3b;
  --systemBlueColor: #2196f3;

  /* Table */
  --tableBackgroundColor: var(--mdSurface);
  --tableBorderColor: var(--mdOutlineVariant);
  --tableHeaderTextColor: var(--mdOnSurfaceVariant);
  --tableHeaderBackgroundColor: var(--mdSurfaceVariant);
  --tableHeaderBorderColor: var(--mdOutlineVariant);
  --tableRowTextColor: var(--mdOnSurface);
  --tableRowBackgroundColor: var(--mdSurface);
  --tableRowBorderColor: var(--mdOutlineVariant);
  --tableRowAlternateTextColor: var(--mdOnSurface);
  --tableRowAlternateBackgroundColor: rgba(103, 80, 164, 0.04);
  --tableRowAlternateBorderColor: var(--mdOutlineVariant);

  /* Dialog */
  --dialogBackground: var(--mdSurface);
  --dialogBoxShadow: var(--elevation5);
  --dialogBorderRadius: 28px;
  
  /* Control - Material Design style */
  --controlBoxShadow: none;
  --controlFocusBoxShadow: none;
  --controlTextFont: normal normal 500 14px/20px var(--themeControlFontFamily);
  --controlBorderRadius: 20px;
  --controlPadding: 10px 24px;
  --controlTextLetterSpacing: 0.1px;
  --controlTextColor: var(--mdOnSurface);
  --controlBackground: var(--mdSurface);
  --controlBorder: 1px solid var(--mdOutline);
  --controlHoverBackground: var(--mdSurface);
  --controlHoverStateLayer: rgba(103, 80, 164, 0.08);
  --controlActiveBackground: var(--mdSurface);
  --controlActiveStateLayer: rgba(103, 80, 164, 0.12);

  /* Button Primary - Filled button */
  --controlBoxShadow--primary: var(--elevation1);
  --controlBackground--primary: var(--mdPrimary);
  --controlBorder--primary: none;
  --controlTextColor--primary: var(--mdOnPrimary);
  --controlHoverTextColor--primary: var(--mdOnPrimary);
  --controlHoverBackground--primary: var(--mdPrimary);
  --controlHoverBoxShadow--primary: var(--elevation2);
  --controlFocusBackground--primary: var(--mdPrimary);
  --controlFocusTextColor--primary: var(--mdOnPrimary);

  /* Button Secondary - Outlined button */
  --controlBoxShadow--secondary: none;
  --controlBackground--secondary: transparent;
  --controlBorder--secondary: 1px solid var(--mdOutline);
  --controlTextColor--secondary: var(--mdPrimary);
  --controlHoverBackground--secondary: rgba(103, 80, 164, 0.08);
  --controlHoverBorder--secondary: 1px solid var(--mdOutline);
  --controlHoverTextColor--secondary: var(--mdPrimary);

  /* Button Tertiary - Text button */
  --controlBoxShadow--tertiary: none;
  --controlBackground--tertiary: transparent;
  --controlBorder--tertiary: none;
  --controlTextColor--tertiary: var(--mdPrimary);
  --controlHoverBackground--tertiary: rgba(103, 80, 164, 0.08);
  --controlPadding--tertiary: 10px 12px;

  /* Input - Material Design style */
  --inputPadding: 16px;
  --inputBoxShadow: none;
  --inputBorder: 1px solid var(--mdOutline);
  --inputBorderRadius: 4px;
  --inputFont: normal normal 400 16px/24px var(--themeControlFontFamily);
  --inputBackground: var(--mdSurfaceVariant);
  --inputFocusBorder: 2px solid var(--mdPrimary);
  --inputFocusBoxShadow: none;
  --inputHoverBorder: 1px solid var(--mdOnSurface);
  --inputLabelFont: normal normal 400 12px/16px var(--themeControlFontFamily);
  --inputLabelColor: var(--mdOnSurfaceVariant);

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

  /* Checkbox - Material style */
  --checkboxSize: 18px;
  --checkboxBorderRadius: 2px;
  --checkboxBorder: 2px solid var(--mdOnSurfaceVariant);
  --checkboxBackground: transparent;
  --checkboxCheckedBackground: var(--mdPrimary);
  --checkboxCheckedBorder: 2px solid var(--mdPrimary);

  /* Radio button */
  --radioSize: 20px;
  --radioBorder: 2px solid var(--mdOnSurfaceVariant);
  --radioBackground: transparent;
  --radioCheckedBackground: var(--mdPrimary);
  --radioCheckedBorder: 2px solid var(--mdPrimary);

  /* Switch */
  --switchWidth: 52px;
  --switchHeight: 32px;
  --switchThumbSize: 24px;
  --switchTrackBackground: var(--mdSurfaceVariant);
  --switchTrackBorder: 2px solid var(--mdOutline);
  --switchCheckedTrackBackground: var(--mdPrimaryContainer);
  --switchCheckedTrackBorder: 2px solid var(--mdPrimary);
  --switchThumbBackground: var(--mdOutline);
  --switchCheckedThumbBackground: var(--mdOnPrimaryContainer);

  /* Toolbar */
  --barItemsFontFamily: var(--themeLabelFontFamily);
  --barItemsTextColor: var(--mdOnSurface);
  --barItemsLabelTextColor: var(--mdOnSurfaceVariant);
  --barItemsDisabledLabelTextColor: rgba(28, 27, 31, 0.38);
  --barItemsDisabledLabelBackgroundColor: transparent;
  --barItemsBorderRadius: 16px;
  --barItemsControlMarkerBorderRadius: 8px;
  --barItemsControlPlaceholderTextColor: var(--mdOnSurfaceVariant);
  --barItemsControlMarkerBackgroundColor: var(--mdSecondaryContainer);
  --barItemsControlsBorder: none;
  --barItemsSegmentControlBackground: var(--mdSurfaceVariant);
  --barItemsHoverSegmentControlBackground: rgba(103, 80, 164, 0.08);
  --barItemsActiveSegmentControlBackground: var(--mdSecondaryContainer);
  --segmentControlBackgroundColor: var(--mdSurface);
  
  /* Sidebar - Material Navigation Rail/Drawer */
  --sidebarBackground: var(--mdSurface);
  --sidebarListItemFont: normal normal 500 14px/20px var(--themeDefaultFontFamily);
  --sidebarListItemBorderRadius: 28px;
  --selectedSidebarListItemBackground: var(--mdSecondaryContainer);
  --selectedSidebarListItemTextColor: var(--mdOnSecondaryContainer);
  --sidebarListItemTextColor: var(--mdOnSurface);
  --selectedSidebarListItemMarker: none;
  --sidebarItemPadding: 12px 24px;
  --sidebarItemHoverBackground: rgba(103, 80, 164, 0.08);
  --sidebarListItemDetailsBackground: var(--mdSurfaceVariant);
  --sidebarListItemHoverBackground: rgba(103, 80, 164, 0.08);
  --sidebarListItemIconSize: 24px;
  --sidebarListItemChildrenPadding: 0 0 0 32px;
  --sidebarSectionTitleColor: var(--mdOnSurfaceVariant);
  --sidebarSectionTitlePadding: 16px 24px 8px 24px;
  --sidebarListItemPadding: 12px 24px;
  
  /* Sidebar Section Title - Material Design Style */
  --sidebarSectionTitleFont: var(--labelFont);
  --sidebarSectionTitleLetterSpacing: 0.01em;
  --sidebarSectionTitleMargin: 24px 0 8px 0;
  --sidebarSectionTitleBackground: transparent;
  --sidebarSectionTitleBorderRadius: 0;
  --sidebarSectionTitleTextTransform: uppercase;

  /* App Layout */
  --appMainToolbarFloatingBackground: var(--mdSurface);
  --appMainToolbarHeight: 64px;

  /* Tab Bar - Material tabs */
  --tabBarBackground: var(--mdSurface);
  --tabBarBoxShadow: inset 0 -1px 0 0 var(--mdOutlineVariant);
  --tabItemHeight: 48px;
  --tabItemTextColor: var(--mdOnSurfaceVariant);
  --tabItemBoxShadow: none;
  --tabItemIconSize: 24px;
  --tabItemFont: normal normal 500 14px/20px var(--themeLabelFontFamily);
  --tabBarLayout: start;
  --tabItemBackground-selected: transparent;
  --tabItemBoxShadow-selected: inset 0 -3px 0 0 var(--mdPrimary);
  --tabItemTextColor-selected: var(--mdPrimary);
  --tabItemFont-selected: var(--tabItemFont);

  /* Scrolled State */
  --scrolledAppMainToolbarBoxShadow: var(--elevation2);

  /* Segment Control - Material chips */
  --segmentControlPadding: 4px;
  --segmentControlSegmentPadding: 6px 12px;
  --segmentControlBoxShadow: none;
  --segmentControlBackground: transparent;
  --segmentControlBorderRadius: 8px;
  --segmentControlIndicatorBoxShadow: none;
  --segmentControlIndicatorBackground: var(--mdSecondaryContainer);
  --segmentControlIndicatorBorderRadius: 8px;

  /* Card - Material card */
  --cardBackground: var(--mdSurface);
  --cardBorder: none;
  --cardBorderRadius: 12px;
  --cardBoxShadow: var(--elevation1);
  --cardPadding: 16px;
  --cardHoverBoxShadow: var(--elevation2);

  /* Popover */
  --popoverBackground: var(--mdSurface);
  --popoverBorder: none;
  --popoverBorderRadius: 4px;
  --popoverBoxShadow: var(--elevation3);

  /* FAB (Floating Action Button) */
  --fabSize: 56px;
  --fabSmallSize: 40px;
  --fabLargeSize: 96px;
  --fabBackground: var(--mdPrimaryContainer);
  --fabColor: var(--mdOnPrimaryContainer);
  --fabBoxShadow: var(--elevation3);
  --fabHoverBoxShadow: var(--elevation4);

  /* Ripple effect */
  --rippleDuration: 600ms;
  --rippleColor: currentColor;
  --rippleOpacity: 0.12;

  /* Snackbar */
  --snackbarBackground: var(--mdInverseSurface);
  --snackbarTextColor: var(--mdInverseOnSurface);
  --snackbarActionColor: var(--mdInversePrimary);
  --snackbarBorderRadius: 4px;
  --snackbarBoxShadow: var(--elevation3);

  /* Animation */
  --animationDuration: 200ms;
  --animationEasing: cubic-bezier(0.4, 0, 0.2, 1);
  --animationEasingDecelerate: cubic-bezier(0, 0, 0.2, 1);
  --animationEasingAccelerate: cubic-bezier(0.4, 0, 1, 1);
  --animationEasingSharp: cubic-bezier(0.4, 0, 0.6, 1);
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  :root {
    /* Material Design 3 Dark Theme Colors */
    --mdPrimary: #d0bcff;
    --mdOnPrimary: #381e72;
    --mdPrimaryContainer: #4f378b;
    --mdOnPrimaryContainer: #eaddff;
    
    --mdSecondary: #ccc2dc;
    --mdOnSecondary: #332d41;
    --mdSecondaryContainer: #4a4458;
    --mdOnSecondaryContainer: #e8def8;
    
    --mdTertiary: #efb8c8;
    --mdOnTertiary: #492532;
    --mdTertiaryContainer: #633b48;
    --mdOnTertiaryContainer: #ffd8e4;
    
    --mdError: #f2b8b5;
    --mdOnError: #601410;
    --mdErrorContainer: #8c1d18;
    --mdOnErrorContainer: #f9dedc;
    
    --mdBackground: #1c1b1f;
    --mdOnBackground: #e6e1e5;
    --mdSurface: #1c1b1f;
    --mdOnSurface: #e6e1e5;
    --mdSurfaceVariant: #49454f;
    --mdOnSurfaceVariant: #cac4d0;
    
    --mdOutline: #938f99;
    --mdOutlineVariant: #49454f;
    
    --mdInverseSurface: #e6e1e5;
    --mdInverseOnSurface: #313033;
    --mdInversePrimary: #6750a4;
    
    /* Update dependent colors */
    --windowBackgroundColor: var(--mdBackground);
    --scrollBarThumbColor: rgba(255, 255, 255, 0.2);
    --activeScrollBarThumbColor: rgba(255, 255, 255, 0.4);
    --backgroundHover: rgba(208, 188, 255, 0.08);
    --backgroundActive: rgba(208, 188, 255, 0.12);
    
    /* Update elevation shadows for dark theme */
    --elevation1: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --elevation2: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --elevation3: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
    --elevation4: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
    --elevation5: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
    
    /* Control adjustments for dark */
    --controlBorder: 1px solid var(--mdOutline);
    --controlHoverStateLayer: rgba(208, 188, 255, 0.08);
    --controlActiveStateLayer: rgba(208, 188, 255, 0.12);
    
    /* Input dark */
    --inputBackground: var(--mdSurface);
    --inputBorder: 1px solid var(--mdOutline);
    
    /* Table dark */
    --tableRowAlternateBackgroundColor: rgba(208, 188, 255, 0.04);
    
    /* Sidebar dark */
    --sidebarListItemDetailsBackground: var(--mdSurface);
    --sidebarListItemHoverBackground: rgba(208, 188, 255, 0.08);
    --sidebarSectionTitleColor: var(--mdOnSurfaceVariant);
  }
}

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

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

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

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

/* High Contrast Support */
@media (prefers-contrast: high) {
  :root {
    --mdOutline: currentColor;
    --controlBorder: 2px solid currentColor;
    --inputBorder: 2px solid currentColor;
    --controlFocusBoxShadow: 0 0 0 3px var(--mdPrimary);
    --inputFocusBoxShadow: 0 0 0 3px var(--mdPrimary);
  }
}

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