:root {
  /* Light mode colors based on Material You light scheme */
  --color-surface-container-low: #f4f3f7;
  --color-surface-container-high: #e8e7eb;
  --color-surface-dim: #ded8e1;
  --color-on-background: #1a1b21;
  --color-error: #ba1a1a;
  --color-outline: #79747e;
  --color-on-surface-variant: #49454f;
  --color-background: #fdfbff;
  --color-on-primary: #ffffff;
  --color-surface-container: #f4f3f7;
  --color-on-primary-container: #00164e;
  --color-error-container: #ffdad6;
  --color-surface-container-highest: #e6e0e9;
  --color-surface: #fdfbff;
  --color-on-error-container: #410002;
  --color-secondary: #565e71;
  --color-on-surface: #1a1b21;
  --color-primary: #264191;
  --color-primary-container: #d9e2ff;
  --color-secondary-container: #dae2f9;
  --color-on-secondary-container: #131c2b;
  --color-tertiary: #705575;
  --color-surface-variant: #e7e0ec;
  --color-surface-bright: #fdfbff;
  --color-on-primary-fixed-variant: #00297a;
}

.dark {
  /* Dark mode colors as defined in the original Stitch design */
  --color-surface-container-low: #191c1e;
  --color-surface-container-high: #272a2c;
  --color-surface-dim: #101415;
  --color-on-background: #e0e3e5;
  --color-error: #ffb4ab;
  --color-outline: #8f909d;
  --color-on-surface-variant: #c5c5d3;
  --color-background: #101415;
  --color-on-primary: #05297a;
  --color-surface-container: #1d2022;
  --color-on-primary-container: #90a8ff;
  --color-error-container: #93000a;
  --color-surface-container-highest: #323537;
  --color-surface: #101415;
  --color-on-error-container: #ffdad6;
  --color-secondary: #b9c7e0;
  --color-on-surface: #e0e3e5;
  --color-primary: #b6c4ff;
  --color-primary-container: #1e3a8a;
  --color-secondary-container: #3c4a5e;
  --color-on-secondary-container: #abb9d2;
  --color-tertiary: #bec6e0;
  --color-surface-variant: #323537;
  --color-surface-bright: #363a3b;
  --color-on-primary-fixed-variant: #264191;
}

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }

/* --- Sidebar Navigation Animations --- */
aside nav a {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-left: 4px solid transparent;
    position: relative;
}

aside nav a:hover {
    background-color: var(--color-surface-container) !important;
    color: var(--color-primary) !important;
    padding-left: 2.25rem !important; /* Slight push right for "premium" feel */
    border-left-color: var(--color-primary);
}

/* Active State Indicator */
aside nav a[class*="bg-secondary-container"] {
    border-left-color: var(--color-primary);
    font-weight: 700;
}

/* Icon Animation */
aside nav a .material-symbols-outlined {
    transition: transform 0.25s ease !important;
}

aside nav a:hover .material-symbols-outlined {
    transform: scale(1.15) rotate(-5deg);
    color: var(--color-primary);
}

/* Click Feedback */
aside nav a:active {
    transform: scale(0.97);
    transition: transform 0.1s ease !important;
}


/* --- Utility Classes for Material You Colors --- */
.bg-primary { background-color: var(--color-primary) !important; }
.text-on-primary { color: var(--color-on-primary) !important; }

.bg-primary-container { background-color: var(--color-primary-container) !important; }
.text-on-primary-container { color: var(--color-on-primary-container) !important; }

.bg-secondary { background-color: var(--color-secondary) !important; }
.text-on-secondary { color: var(--color-on-secondary) !important; }

.bg-secondary-container { background-color: var(--color-secondary-container) !important; }
.text-on-secondary-container { color: var(--color-on-secondary-container) !important; }

.bg-surface { background-color: var(--color-surface) !important; }
.text-on-surface { color: var(--color-on-surface) !important; }

.bg-surface-container { background-color: var(--color-surface-container) !important; }
.bg-surface-container-low { background-color: var(--color-surface-container-low) !important; }
.bg-surface-container-high { background-color: var(--color-surface-container-high) !important; }

.bg-error { background-color: var(--color-error) !important; }
.text-on-error { color: #ffffff !important; }
.bg-error-container { background-color: var(--color-error-container) !important; }
.text-on-error-container { color: var(--color-on-error-container) !important; }