:root {
  /* Light Theme */
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-on-primary-container: #21005d;
  --md-sys-color-secondary: #625b71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-on-secondary-container: #1d192b;
  --md-sys-color-tertiary: #7d5260;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffd8e4;
  --md-sys-color-on-tertiary-container: #31111d;
  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #410e0b;
  --md-sys-color-background: #fffbfe;
  --md-sys-color-on-background: #1c1b1f;
  --md-sys-color-surface: #fffbfe;
  --md-sys-color-on-surface: #1c1b1f;
  --md-sys-color-surface-variant: #e7e0ec;
  --md-sys-color-on-surface-variant: #49454f;
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #c4c7c5;
  --md-sys-color-inverse-surface: #313033;
  --md-sys-color-inverse-on-surface: #f4eff4;
  
  --md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-full: 9999px;
  
  --md-ref-typeface-plain: 'Roboto', system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark Theme */
    --md-sys-color-primary: #d0bcff;
    --md-sys-color-on-primary: #381e72;
    --md-sys-color-primary-container: #4f378b;
    --md-sys-color-on-primary-container: #eaddff;
    --md-sys-color-secondary: #ccc2dc;
    --md-sys-color-on-secondary: #332d41;
    --md-sys-color-secondary-container: #4a4458;
    --md-sys-color-on-secondary-container: #e8def8;
    --md-sys-color-tertiary: #efb8c8;
    --md-sys-color-on-tertiary: #492532;
    --md-sys-color-tertiary-container: #633b48;
    --md-sys-color-on-tertiary-container: #ffd8e4;
    --md-sys-color-error: #f2b8b5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8c1d18;
    --md-sys-color-on-error-container: #f9dedc;
    --md-sys-color-background: #1c1b1f;
    --md-sys-color-on-background: #e6e1e5;
    --md-sys-color-surface: #1c1b1f;
    --md-sys-color-on-surface: #e6e1e5;
    --md-sys-color-surface-variant: #49454f;
    --md-sys-color-on-surface-variant: #cac4d0;
    --md-sys-color-outline: #938f99;
    --md-sys-color-outline-variant: #444746;
    --md-sys-color-inverse-surface: #e6e1e5;
    --md-sys-color-inverse-on-surface: #313033;
  }
}

body {
  background-color: var(--md-sys-color-background) !important;
  color: var(--md-sys-color-on-background) !important;
  font-family: var(--md-ref-typeface-plain) !important;
  margin: 0;
}

/* === Naive UI Overrides === */

/* Buttons */
.n-button {
  border-radius: var(--md-sys-shape-corner-full) !important;
  font-family: var(--md-ref-typeface-plain) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

.n-button--primary-type {
  background-color: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
  border: none !important;
}
.n-button--primary-type:hover {
  background-color: var(--md-sys-color-primary) !important; /* Need to darken/lighten manually or use overlay */
  filter: brightness(1.08);
  box-shadow: var(--md-sys-elevation-1);
}

.n-button--default-type {
  color: var(--md-sys-color-primary) !important;
  border: 1px solid var(--md-sys-color-outline) !important;
  background-color: transparent !important;
}

.n-button--error-type {
  background-color: var(--md-sys-color-error) !important;
  color: var(--md-sys-color-on-error) !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
}

/* Cards */
.n-card {
  border-radius: var(--md-sys-shape-corner-large) !important;
  background-color: var(--md-sys-color-surface) !important;
  border: 1px solid var(--md-sys-color-outline-variant) !important;
  /* Material 3 cards can be outlined, filled, or elevated. Defaulting to outlined for safety, or filled surface */
  background-color: var(--md-sys-color-surface-variant) !important; 
  /* Actually surface-variant is for contained cards, let's use surface + elevation or outline */
  background-color: var(--md-sys-color-surface) !important;
  box-shadow: none !important; /* Start clean */
}
.n-card.n-card--bordered {
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}

/* Headers / App Bars */
.n-layout-header {
  background-color: var(--md-sys-color-surface) !important;
  color: var(--md-sys-color-on-surface) !important;
  border-bottom: none !important;
  /* Use surface color mapping to elevation 2 if needed */
  box-shadow: none !important;
}

/* Typography adjustments */
.n-card-header__main {
  font-family: var(--md-ref-typeface-plain) !important;
  font-size: 22px !important; /* Headline Small */
  line-height: 28px !important;
}

/* Inputs */
.n-input {
  border-radius: 4px !important; /* Text fields are usually slightly rounded */
  background-color: var(--md-sys-color-surface-variant) !important;
  border: none !important;
  border-bottom: 1px solid var(--md-sys-color-on-surface-variant) !important;
}
.n-input__input-el {
  color: var(--md-sys-color-on-surface-variant) !important;
}
.n-input:hover {
    filter: brightness(0.95);
}
.n-input--focus {
  border-bottom: 2px solid var(--md-sys-color-primary) !important;
}

/* Alerts */
.n-alert {
  border-radius: var(--md-sys-shape-corner-large) !important;
}
.n-alert--info-type {
  background-color: var(--md-sys-color-secondary-container) !important;
  color: var(--md-sys-color-on-secondary-container) !important;
  border: none !important;
}
.n-alert--success-type {
    background-color: #d1e7dd !important; /* Custom or map to tertiary */
    color: #0f5132 !important;
}

/* Switches */
.n-switch__rail {
    background-color: var(--md-sys-color-surface-variant) !important;
    border: 1px solid var(--md-sys-color-outline) !important;
}
.n-switch--active .n-switch__rail {
    background-color: var(--md-sys-color-primary) !important;
    border: none !important;
}
.n-switch__button {
    background-color: var(--md-sys-color-outline) !important;
}
.n-switch--active .n-switch__button {
    background-color: var(--md-sys-color-on-primary) !important;
}

/* Layout */
.n-layout, .n-layout-sider {
    background-color: var(--md-sys-color-background) !important;
}

/* Global Scrollbar (optional) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--md-sys-color-surface); 
}
::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline); 
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--md-sys-color-on-surface-variant); 
}